vue-element-admin-template 權限控制整理

vue-element-admin是個強大的管理後台框架

https://github.com/PanJiaChen/vue-element-admin/tree/master/src/directive

經過了一些琢磨，終於知道vue-element-admin-template如何增加權限控制

首先，先把邏輯關係理清楚：

          登錄後通過token獲取用戶對應的角色role，動態的根據用戶role算出其對應的有權限的路由，通過rotuer.addRoutes動態加載這些路由

      數據和操作通過vuex全局管理控制

如果繼續用mock模擬數據，那麼需要在mock增加role數據route.js 動態路由和通用路由 

mock/role/routes.js

//通用路由
export const constantRoutes = [
  
  {
    path: '/login',
    component: 'views/login/index',
    hidden: true
  },
  {
    path: '/404',
    component: 'views/error-page/404',
    hidden: true
  },
  {
    path: '/401',
    component: 'views/error-page/401',
    hidden: true
  },
  {
    path: '',
    component: 'layout/Layout',
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: 'views/dashboard/index',
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  },
  
]

//動態路由
export const asyncRoutes = [
  {
    path: '/nested',
    component: 'layout/Layout',
    redirect: '/nested/menu1/menu1-1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'nested'
    },
    children: [
      {
        path: 'menu1',
        component: 'views/nest