如果实现不同的帐号登陆系统后能看到不同的页面，同一页面也可以设置按钮的权限是否展示?来我带你认识一下RBAC

1.RBAC权限设计思想

背景

为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。

其权限模式如下:

三个关键点:

用户： 就是使用系统的人（员工）

权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）

角色：不同的权限点的集合

如何给用户添加功能

给用户分配角色，给角色分配权限点

系统中的权限点可以随意添加吗？

不能。必须是程序员已经开发出来的功能！！

一、权限应用：动态生成左侧菜单栏的菜单（利用addRoutes（）方法）

思路：当用户点击登录以后，首先进入路由守卫，在路由守卫中，获取用户的信息包括用户权限，在vuex中保存菜单信息，然后运用addRoutes()方法动态添加路由配置，最后完成登录功能，然后用户就可以看到在自己权限范围内显示的页面和功能

补充：addRourtes()对象的格式

router.addRoutes([路由配置对象])
或者:
this.$router.addRoutes([路由配置对象])

 动态添加路由配置

（1）首先要把router文件夹里面添加的动态路由的配置删除掉

const createRouter = () =>
  new Router({
    // 控制路由滚动行为，滚动到顶部
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    // 最终生成的路由配置：动态+静态
   - // routes: [...constantRoutes, ...asyncRoutes]
   + routes: [...constantRoutes]
  })

（2）在路由守卫中在有token时，使用addRourtes()，添加动态路由

router.beforeEach(async (to, from, next) => {
  const token = store.state.user.token
  // console.log(token)
  if (token) {
    if (to.path === '/login') {
      // 有token ，还去登录——>直接去主页
      next('/')
    } el