后台管理系统权限问题必答

权限管理整个流程 

1.组件模块部分.
用户管理：所有帐号的增删改查，为该帐号分配可选权限角色信息
角色管理：角色信息的增删改查，为该角色分配具体权限数据
权限管理：对应路由需求的访问权

权限管理分三部分

- api请求定义:
  - 主要后端处理，
  - 前端：响应拦截统一错误处理

- 路由
  1. 将路由分为二大块
     - 静态路由：不需要访问权限的路由
     - 动态路由：需要权限访问的路由
     - 默认只有静态路由,不需要访问权限的路由不保留404的处理方式

  2. 在获取到用户信息后
     1. 打印当前用户具体信息.找到该用户权限相关信息.
     2. 通过和动态路由循环匹配出对应的页面的路由信息,
     3. 通过addRoutes动态添加到默认路由上
        1. 出现了一些坑点
             刚添加的路由不能立马使用需要再经过一次导航守卫
             解决方式：

         在导航守卫中next(to.fullPath)
         404问题（刚添加的不能立马使用，如果静态路由中包含*匹配404，就会直接跳转到404）
             解决方式：

             将静态路由中之前删掉的404，通过addRoutes和权限路由一起添加到最后

3. - 菜单问题
              早期 菜单使用this.$router.options.routes，这是原始自动生成菜单的代码.

              vue-element-admin 后台模板中早就定义的.用于生成菜单.
              该值不是响应式的，造成菜单没有对应更新
                 解决方式

               通过vuex存储路由配制数据（和路由配制保持同步）
               使用vuex中的路由配制路由实现响应式

                  首先在指定的vuex中首先匹配无权限的路由.

                   然后把循环匹配后的路由和404一起添加进去.

                  最后将菜单中的this.$router.options.routes 修改成当前路由对应的state中的值

              退出切换帐号上一个帐号addRoutes添加的路由还能使用
              解决方式：退出时重置路由/或者刷新页面

4 按钮
   通过自定义指令当用户信息的按钮权限信息包含当前按钮标识 时正常显示，不包含就不显示
   v-if/v-show    mixin也可以

具体代码 

在vuex登录成功时获取到个人用户信息后通过addroutes添加路由

    // 1.分离需要权限的路由
    // 2.删除404.不需要权限的路由不用404
    // 3.导入这个文件
    // 4.循环这个文件中自定义的名字于登录获取的个人信息中的roles.menus匹配是否包裹
    // 5.匹配完毕以后使用addRoutes添加到默认的不需要权限的路由中.
    // 6.因为addRoutes需要再执行一次导航守卫.将next() 修改为to.fullPath


    import mourouter from '@/router/mouder/index'
    // mourouter 是抽离出来需要权限访问的路由

    const Array = mourouter.filter((item) => {
      return res.data.roles.menus.includes(item.meta.name)
    })
    console.log(Array, 123)
    Router.addRoutes([...Array, { path: '*', redirect: '/404', hidden: true }])

动态生成菜单

    // 当获取到对应的路由权限以后
    // 1.首先展现默认不需要权限的路由模块
    // 2.创建一个新的vuex保存不需要权限的路由模块
    // 3.导入公共vuex中
    // 4.将默认的路由和对应的权限路由模块邦迪在一起.
    // 5.通过新增的vuex里面的mutations里的方法修改vuex里储存的默认路由
    // 6.最后在自动生成的index.vuex文件中return 出这个值.
    // 7.避免bug 需要再退出的地方清空保存的路由,恢复的默认状态

    // 新建的vuex文件
    const state = {
      routerList: constantRoutes
    }
    const mutations = {
      addUpData(state, value) {
        state.routerList = value
      }
    }
    const actions = {}
    const getters = {}
    export default {
      namespaced: true,
      state,
      mutations,
      getters,
      actions
    }


    const conRouters = [
      ...constantRoutes, // 默认不需要权限的路由
      ...Array,    // 循环匹配后需要权限的路由
      { path: '*', redirect: '/404', hidden: true }]  // 固定404
    commit('useradd/setdata', conRouters, { root: true }) // 将所有可选的路由存到新的vuex中


   // 最后在生成菜单的组件中修改vuex存储的值