elementui-amin动态路由权限详解

开始使用的elementui-amin是下载带所有组建的版本，代码太乱直接看不明白，直接放弃，

后来下载了纯净版，但是一开始动态路由还是没高明白后来才发现他是使用用户信息里面的roles这个数组来判断的

可以看看mock 文件夹下的login.js

admin: {
roles: [‘admin’],
token: ‘admin’,
introduction: ‘我是超级管理员’,
avatar: ‘https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif’,
name: ‘Super Admin’
},
editor: {
roles: [‘editor’],
token: ‘editor’,
introduction: ‘我是编辑’,
avatar: ‘https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif’,
name: ‘Normal Editor’
}

其实最重要的就是这个roles

看了路由 文件 router 下面的Index.js

1. 路由分为两部分，一部分是不需要权限加载的

constantRouterMap

2. 一部分是需要动态加载的

asyncRouterMap

那从这里我们就可以帮不需要动态加载的路由全部放在constantRouterMap里面，所有用户都能看到，需要加载的就按照他的个是依次在asyncRouterMap里面添加

观察store文件夹下的permission.js不难发现
他根据用户信息里面的 roles 字段发现，admin的时候是返回全部路由，

  if (roles.includes('admin')) {
          //返回全部菜单
           accessedRouters = asyncRouterMap

不是管理员的时候过滤出当前用户对应的路由

 accessedRouters = filterAsyncRouter(asyncRouterMap, roles);

跟新vux里面的菜单

commit('SET_ROUTERS', accessedRouters)

我想到的是 一般后端我们都有一个用户表，角色表，用用户来跟角色关联，
比如后端数据有

admin  (超级管理员)  editamin(编辑员)  boos(老板领导)

然后加入我们这个路由只能editamin看到

我们在动态路由里面就这么写

export const asyncRouterMap = [
//测试添加新页面
{
  path: '/testpage',
  component: Layout,
  redirect: 'noredirect',
  alwaysShow: true,
  meta: {
    title: '编辑设置',
    icon: 'lock',
    roles: ['editor']
  },
  children: [
      {
        path: 'testa',
        component: () => import('@/views/testpage/testa'),
        name: 'testa',
        meta: {
          title: '文章编辑',
          roles: [ 'editamin']
        }
      },
    
     {
      path: 'testb',
      component: () => import('@/views/testpage/testb'),
      name: 'testb',
      meta: {
        title: '材料编辑',
        // 如果不设置角色，则表示：此页面不需要权限
      roles: [ 'xxxx']
      },
    },


  ]
},


{ path: '*', redirect: '/404', hidden: true }
]

这样的话只有admin 和 editamin 角色可以看到这个菜单，如果meta 下的 roles不写，则不需要权限，如果随便写了一个，editamin 这个角色是看不到的，

总结，在我们需要的动态路由里面，哪个角色需要此菜单，就帮这个角色放进 roles: [ ‘a’,‘b’,‘c’] 前提你要知道后端有哪些角色

roles 留空全部可以访问。设置谁谁可以访问

以前我常规做法是在后台页面添加菜单，然后给菜单分配用户权限，然后后端返回一颗路由树结构，前端渲染，这个方法是方便，但是工作量大

如果使用elementui admin 控制权限，我想到一个问题，如果给某个菜单需要又给某个用户添加权限，又得手动在roles里面加，又需要再次打包，还是还有其他方法 ，有待研究，