权限管理整个流程

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存储的值

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

权限管理整个流程

猜你喜欢