路由实现页面+按钮级别不同的权限控制

RBAC权限设计思想（基于角色的权限分配解决方案）

实现不同的帐号登陆系统后能看到不同的页面，能执行不同的功能

必定需要根据不同的员工角色配置不同的权限

一种基于角色的设计思想

给员工配置角色 （一个员工可以拥有多个角色）
给角色配置权限 （一个角色可以有多个权限）
权限控制
我们实现了RBAC权限设计思想的各个环节后，接下来我们就可以利用这些权限点做实际的权限控制，在当前项目里，权限的控制有两个地方：

菜单权限控制（不同的用户进来系统之后，看到的菜单是不同的） 操作按钮权限控制 (页面上的按钮，不同的人也有不同权限)

1、页面级权限控制

流程图：

用户能访问哪些页面是通过actions获取到的，需要从action中返回。

// 获取用户信息 actions:{ ...... 发请求 return res }, 在路由守卫里面：

获取到权限信息，然后再在所有路由列表里过滤掉非当前用户权限

    // 获取权限信息
    const res = await store.dispatch('user/getUserProfile')
    // console.log(res.data.roles.menus)
    // 接收到当前用户权限信息
    const menus = res.data.roles.menus
    // 在所有路由列表里过滤掉非当前用户权限
    const filterRoles = asyncRoutes.filter(item => {
      const name = item.children[0].name
      return menus.includes(name)
    })

在根据权限信息动态添加路由，并将权限列表储存到vuex中

    // 根据权限信息动态添加路由
    router.addRoutes(filterRoles)
    // 将权限列表储存到vuex中
    store.commit('menu/updateMenuList', filterRoles)

在以上代码下面加上如下代码：

 // 解决刷新以后出现404的情况 将404页面放在最后
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoutes)
        // 把动态路由添加到vuex中
        store.commit('menu/updateMuenList', filterRoutes)
        // 解决刷新出现白屏的问题
        next({
          ...to,
          replace: true
        })
      } else { next() }

// 在登出时调用该方法

// 重置路由

export function resetRouter() {

const newRouter = createRouter()

router.matcher = newRouter.matcher // 重新设置路由的可匹配路径 }

2、按钮级权限控制

流程图：

在vuex中获取到按钮权限列表

// 从vuex中取出points,
const points = store.state.user.userInfo.roles.points

在main.js中注册一个自定义指令

// 定义插件，做按钮级别的权限控制
import directive from './directive'
Vue.use(directive)

在页面的按钮上加上

// 自定义指令 v-allow="'import_excel'"

至此，两种权限控制完成。