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: 'v