持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

获取用户所有按钮权限

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

获取用户所有按钮权限

通过上一节，我们分析了，按钮权限 这个功能

这一节，我们将先实现获取当前登录用户的所有的按钮权限

分析

为什么要获取所有的呢？

其实这是为了方便处理，因为现在所有的按钮权限，都在不同的页面下

如果想要获取，就要很麻烦的每个页面都要调用一遍方法
但是如果是一次性获取，当前用户所有的权限按钮，形成一个数组，那么我们只需要进行匹配即可，这样会更加容易

但是该在哪个位置处理合适呢？

我个人认为，是在获取到所有菜单时，与形成路由和 菜单树 时，一起生成当前用户所有的按钮权限，并且将其存储到 Pinia 中，比较合理。

实现

因为这是跟用户有关的，所以是在 Pinia 中 user 中，设置权限

  state: () => {
    return {
      permission: [] // 所有的按钮权限
    }
  },
  getters: {
    getPermission: (state) => state.permission
  },
  actions: {
    SetPermission(permission) {
      this.permission = permission
    }
  }

之后，我们来进行 获取当前用户所有按钮权限

通过返回的所有菜单，然后根据用户所拥有的菜单id，进行匹配

代码的位置 src\router\dynamicRouter.ts

const getPermission = (list) => {
  const userStore = useUserStore()
  const userMenusId: any = userStore.getUserMenusId
  
  // 获取当前用户拥有的 按钮菜单
  const permissionList = list.filter((item) => {
    return userMenusId.includes(item.id) && item.type === 2
  })
  
  // 最后只需要返回字段即可
  return permissionList.map((item) => {
    return item.perms
  })
}

最后将得到的结果，保存到 Pinia 中

const permission = getPermission(res.menus)

userStore.SetPermission(permission)

结果如下

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

这一节，实现了，获取当前用户所有的按钮权限

后台项目 Express-Mysql-Vue3-TS-Pinia 获取用户所有按钮权限

获取用户所有按钮权限

引言

获取用户所有按钮权限

分析

实现

总结