基於Vue.js 2.x系列 + Element UI 的后台系統權限控制
前言：關於vue權限路由的那些事兒……
項目背景:現有一個后台管理系統，共存在兩種類型的人員
①超級管理員（稱作admin），②普通用戶（稱作editor）
每種類型的人看到的操作欄並不一樣，可以進行的操作也不盡相同，於是就需要程序處理一下各個權限問題。
過程說難不難，說簡單不算簡單
【迷茫的前期】
上百度、Google，狂搜了好多關於權限的問題，也許是仁者見仁智者見智吧，五花八門的介紹讓自己更加迷茫不堪，真心不知道從哪里下手：
1）讓后端返回關於權限的json數據吧，但卻不太懂這樣的數據應該怎樣處理；
2）在前端路由那里處理，可是不明白應該怎樣使用何種屬性來實現這個功能；
【最后】
最后看到一篇文章 手摸手，帶你用vue擼后台 系列二(登錄權限篇)
，但是發現代碼非常多權限功能是整合在框架里面的，傷心，我就想實現一個小小的權限功能，沒辦法還是仔細的研究了起來。
具體實現思路
1 創建vue實例的時候將vue-router掛載，但這個時候vue-router掛載一些登錄或者不用權限的公用的頁面。
2 當用戶登錄后，獲取用role，將role和路由表每個頁面的需要的權限作比較，生成最終用戶可訪問的路由表。
3 調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由。
4 使用vuex管理路由表，根據vuex中可訪問的路由渲染側邊欄組件。
是不是有點懵沒關系下面我盡量用通俗點的話來講每一步
1在路由router.js里面聲明權限為admin的路由(異步掛載的路由asyncRouterMap)
// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [
{
path: '/',
redirect: '/login',
hidden: true
},
{
path: '/login',
name: '登錄頁面',
hidden: true,
component: resolve => require(['../views/login/Login.vue'], resolve)
},
{
path: '/Readme',
// name: 'Readmehome',
index: 'Readme',
meta: {
title: 'Readme',
icon: 'el-icon-menu'
},
component: resolve => require(['../components/common/Home.vue'], resolve),
children: [
{
name: 'Readme',
path: '/',
meta: { title: 'Readme', icon: 'el-icon-menu' },
component: resolve => require(['../components/page/Readme.vue'], resolve)
}
]
}
]
export default new Router({
routes: constantRouterMap
})
// 異步掛載的路由
// 動態需要根據權限加載的路由表
export const asyncRouterMap = [
{
path: '/permission',
// name: 'permissionhome',
meta: {
title: 'permission',
icon: 'el-icon-setting',
roles: ['admin']
},
component: resolve => require(['../components/common/Home.vue'], resolve),
children: [
{
name: 'permission',
path: '/permission',
meta: {
title: 'permission', icon: 'el-icon-menu', roles: ['admin']
},
component: resolve => require(['../components/page/permission.vue'], resolve)
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]
這里我們根據 vue-router官方推薦 的方法通過meta標簽來標示改頁面能訪問的權限有哪些。如meta: { role: ['admin','super_editor'] }表示該頁面只有admin和超級編輯才能有資格進入。
注意事項：這里有一個需要非常注意的地方就是 404 頁面一定要最后加載，如果放在constantRouterMap一同聲明了404，后面的所以頁面都會被攔截到404，詳細的問題見addRoutes when you've got a wildcard route for 404s does not work
2當用戶登錄后，獲取用role，將role和路由表每個頁面的需要的權限作比較，調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由，生成最終用戶可訪問的路由表。路由表存在vuex里面
permission.js
// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 驗權
const whiteList = ['/login', '/authredirect'] // 不重定向白名單
router.beforeEach((to, from, next) => {
if (getToken()) { // 判斷是否有token
if (to.path === '/login') {
next({ path: '/' })
} else {
if (store.getters.roles.length === 0) {
console.log('roles====0')
store.dispatch('GetInfo').then(res => { // 拉取用戶信息
const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
console.log('roles?', roles)
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根據roles權限生成可訪問的路由表
console.log('addrouters', store.getters.addRouters)
router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('驗證失敗,請重新登錄')
next({ path: '/login' })
})
})
} else {
console.log('====1')
next() // 當有用戶權限的時候，說明所有可訪問路由已生成 如訪問沒權限的全面會自動進入404頁面
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})
3使用vuex管理路由表，根據vuex中可訪問的路由渲染側邊欄組件（菜單）。
最后預覽鏈接
源碼下載
https://github.com/mgbq/vue-permission
打賞 衷心的表示感謝
