附上：vue-element-admin 官方文檔 vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/guide/css
大佬寫的權限發如今本身公司上面用並很差使作了點修改費了老大勁 html
1，首先數據庫表結構爲vue
1 CREATE TABLE [dbo].[QD_Router]( 2 Id INT IDENTITY(1,1) NOT NULL,--惟一id 3 SySCName NVARCHAR](50) NULL,--菜單中文名稱 4 name NVARCHAR(50) NULL ,--菜單英文名稱 5 SysLayer INT NULL,--菜單等級 6 SysUpId INT NULL,--菜單上級id 7 )
2，須要修改src\store\modules\user.js 下GetInfo方法git
1 GetInfo({ commit, state }) { 2 return new Promise((resolve, reject) => { 3 QueryUserRole().then(response => { 4 console.log(response) 5 6 resolve(response) 7 }).catch(error => { 8 reject(error) 9 }) 10 }) 11 },
3. 新建dynamicRoutes.js：該文件中定義須要根據用戶權限動態掛載顯示的路由github
1 import Layout from '@/layout' 2 /** 3 * 動態路由，須要根據用戶權限動態掛載 4 */ 5 const DynamicRoutes = [ 6 { 7 path: '/system', 8 component: Layout, 9 redirect: '/system/user', 10 name: 'System', 11 meta: { 12 title: '系統管理', 13 icon: 'example', 14 permission: 'MENU_SYSTEM' 15 }, 16 children: [ 17 { 18 path: 'user', 19 name: 'User', 20 component: () => import('@/views/system/user/index'), 21 meta: { 22 title: '用戶管理', 23 icon: 'table', 24 permission: 'MENU_SYSTEM_USER' 25 } 26 }, 27 { 28 path: 'role', 29 name: 'Role', 30 component: () => import('@/views/system/role/index'), 31 meta: { 32 title: '角色管理', 33 icon: 'table', 34 permission: 'MENU_SYSTEM_ROLE' 35 } 36 }, 37 { 38 path: 'dict', 39 name: 'Dict', 40 component: () => import('@/views/system/dict/index'), 41 meta: { 42 title: '字典管理', 43 icon: 'table', 44 permission: 'MENU_SYSTEM_DICT' 45 } 46 } 47 ] 48 }, 49 ] 50 51 export default DynamicRoutes
4，permission.js：該文件用於路由跳轉前的權限校驗，如：token校驗、獲取用戶信息生成用戶動態菜單等數據庫
1 import router from './router' 2 import store from './store' 3 import NProgress from 'nprogress' // progress bar 4 import 'nprogress/nprogress.css' // progress bar style 5 import { Message } from 'element-ui' 6 import { getToken } from '@/utils/auth' // getToken from cookie 7 import { loginCheck } from "@/api/login"; 8 import asyncRouterMap from './router/dynamicRoutes' 9 10 11 NProgress.configure({ showSpinner: false })// NProgress configuration 12 13 14 const whiteList = ['/login'] // 不重定向白名單 15 16 17 //將後臺傳輸的數據與當前路由對比生成用戶所屬路由 18 export function recursionRouter(userRouter = [], allRouter = []) { 19 var realRoutes = [] 20 allRouter.forEach((v) => { 21 22 userRouter.forEach((item) => { 23 if (v.name == item.name) { 24 25 v.children = recursionRouter(item.SysLayer, v.children) 26 realRoutes.push(v) 27 28 } 29 }) 30 }) 31 32 return realRoutes 33 } 34 //獲取後臺傳輸過來的用戶權限 35 export function arrayToTree(arr, SysUpId) { 36 let temp = []; 37 let treeArr = arr; 38 treeArr.forEach((item, index) => { 39 if (item.SysUpId == SysUpId) { 40 if (arrayToTree(treeArr, treeArr[index].Id).length > 0) { 41 treeArr[index].SysLayer = arrayToTree(treeArr, treeArr[index].Id); 42 } 43 temp.push(treeArr[index]); 44 } 45 }); 46 return temp; 47 } 48 router.beforeEach((to, from, next) => { 49 NProgress.start() 50 if (getToken()) { 51 if (to.path === '/login') { 52 next({ path: '/' }) 53 NProgress.done() / 54 } else { 55 if (store.getters.roles.length === 0) { 56 store.dispatch('GetInfo').then(res => { 57 let Hroel = arrayToTree(res,0) 58 let newRole = recursionRouter(Hroel,asyncRouterMap) 59 router.addRoutes(newRole) 60 router.options.routes = newRole 61 //在每次刷新時校驗token是否過時 62 loginCheck(getToken()).then(result => { 63 if (result.code != 200) { 64 store.dispatch('FedLogOut').then(() => { 65 Message.error(err || '登陸失效請從新登陸') 66 next({ path: '/' }) 67 }) 68 } 69 }) 70 next() 71 }).catch((err) => { 72 store.dispatch('FedLogOut').then(() => { 73 Message.error(err || '登陸失效請從新登陸') 74 next({ path: '/' }) 75 }) 76 }) 77 } else { 78 next() 79 } 80 } 81 } else { 82 if (whiteList.indexOf(to.path) !== -1) { 83 next() 84 } else { 85 next(`/login?redirect=${to.path}`) // 不然所有重定向到登陸頁 86 NProgress.done() 87 } 88 } 89 }) 90 router.afterEach(() => { 91 NProgress.done() // 結束Progress 92 })
原文出處：https://www.cnblogs.com/provedl/p/11871317.htmlelement-ui