后台管理系统权限管理实现步骤

1.管理员给账户分配角色

通过api接口的调用给用户添加不同的参数字段标识

2.管理员给角色分配权限

通过api接口的调用，将不同的权限参数绑定给相应的角色

3.路由权限

1. 与权限有关的组件路由提取到一个新的js文件中，作为动态权限的路由文件
   

2. 在请求用户信息的函数中，额外添加一个根据用户信息中的角色ID请求权限数据的API请求，并将两次请求的信息拼接在一起，形成一个既包括用户信息，又包括用户权限信息的新用户信息对象，并存储在vuex中

 async getUserInfo(store) {
    // 获取用户信息
    const res = await sysprofile()
    // 获取角色基本信息
    const res2 = await sysuser(res.data.userId)
    // 通过Object.assign()方法将两次请求的数据拼接成新的用户信息
    store.commit('addUserInfo', Object.assign({}, res.data, res2.data))
    // 根据合并后用户信息中的权限字段，在所有动态路由中筛选出符合条件的路由
    const ArrRouter = asyncRouter.filter(item => {
      return res.data.roles.menus.includes(item.name)
    })
    // 通过Router.addRoutes()方法，将筛选出来的路由添加到路由信息中，
     Router.addRoutes([...ArrRouter, { path: '*', redirect: '/404', hidden: true }])
     }
   // 由于Router.addRoutes()方法添加的路由只能在更新后被加载，所以需要将'/404'放在此处，避免初次进入时直接报404错误，并且在路由前置守卫中，需要做如下配置：
   // 在获取用户信息的地方添加next(to.fullPath)
   // 注意事项：router.matcher = newRouter.matcher 用于重置路由，一方面避免下次登录时会继承上个用户登录的路由权限，另一方面也是为了避免相同的路由节点被重复追加
```html
 await Store.dispatch('user/getUserInfo')
        next(to.fullPath)

4.菜单权限

背景：addRoutes添加路由信息后，根据路由信息渲染出来的侧边栏中，仍然只有静态路由的选项，没有新动态添加的那几个权限菜单
原因：this.$router.options.routes无法动态获取路由，所以在addRoutes动态添加之后，this.$router.options.routes捕获到的仍只有添加前的静态路由
解决办法：将静态路由和动态路由拼接在一起，并存在vuex中，让渲染侧边栏的数组从vuex中获取动态的数据

```html
  // constantRoutes是导入的静态路由，ArrRouter是筛选出来的动态路由
  store.commit('route/getRouterList', [...constantRoutes, ...ArrRouter], { root: true })

更改侧边栏的渲染数据来源

this.$store.state.route.routerList

5.按钮权限

根据用户信息中是否包含某个按钮权限字段来决定该按钮是否渲染，以此实现按钮权限

btnPermission: {
    inserted(dom, obj) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    },
    componentUpdate(dom, obj) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    }
  }```