大致以文件的形式進(jìn)行描述
1.router/index.js : 該文件定義了router, 分別為 constRoutes(靜態(tài)路由表，包括登錄航缀，404等) 和 asyncRouters （動(dòng)態(tài)路由表商架，需要進(jìn)行權(quán)限管理的都將定義在這里）
2.store/state.js : 在 state 中定義 asyncMenuList （動(dòng)態(tài)權(quán)限列表）和 rolesId (后臺(tái)返回權(quán)限碼 Array)
3.store/mutation.js : 在mutations中定義方法（修改state中的asyncMenuList 、 rolesId ）：
SET_MENU_LIST: (state, data) => {
state.asyncMenuList = data
}
SET_ROLES_ID: (state, id) => {
state.rolesId = id
}
4.store/actions : 首先引入在router中定義的 asyncRoutes 芥玉，在登錄action中將后臺(tái)返回的rolesId存儲(chǔ)在vuex中蛇摸， 然后在 actions 中定義GetRoutes action：
GetRoutes ({commit}, data) {
// 該 action 被外部調(diào)用，調(diào)用后灿巧，會(huì)更新vuex中存儲(chǔ)的asyncMenuList
return new Promise((resolve, reject) => {
//判斷如果data為 ‘a(chǎn)ll’赶袄，則為超級(jí)管理員，否則調(diào)用menuFiltters方法對(duì)data進(jìn)行動(dòng)態(tài)路由匹配
if (data === 'all') {
//調(diào)用mutation中定義的 SET_MENU_LIST 方法抠藕，更新vuex中存儲(chǔ)的asyncMenuList
commit('SET_MENU_LIST', asyncRoutes)
} else {
let menuRoutes
menuRoutes = menuFiltters(asyncRoutes, data)
// 將匹配成功的路由更新到vuex中存儲(chǔ)的asyncMenuList中
commit('SET_MENU_LIST', menuRoutes)
}
resolve()
})
}
5.store/actions : 在action外部定義函數(shù) menuFiltters 和 hasPermission
// 使用遞歸饿肺，匹配權(quán)限碼，返回符合權(quán)限碼的路由
function menuFiltters (asyncRoutes, roles) {
const res = []
asyncRoutes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = menuFiltters(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
// 用 some 判斷 router 中的權(quán)限碼是否在數(shù)組 roles 中存在盾似，存在返回true敬辣，否則返回false
function hasPermission (roles, router) {
return roles.some(role => router.meta.roles.includes(Number(role)))
}
6.permission.js : 定義路由守衛(wèi)，調(diào)用 actions 中的 GerRoutes , 匹配動(dòng)態(tài)權(quán)限路由零院，代碼如下
import router from './router'
import store from './store'
import { getToken, getUuid, getUserName, getRoleIDs, removeToken, removeUserName, removeRoleIDs } from '@/utils/auth'
import { asyncRoutes } from '@/router'
const whiteList = ['/login']
router.beforeEach((to, from, next) => {
// 每次加載路由判斷是否已經(jīng)獲取用戶信息 若未獲取用戶信息則跳轉(zhuǎn)到登錄
if (getToken() && getUuid() && getUserName() && getRoleIDs()) {
if (to.path === '/login') {
removeToken()
removeUserName()
removeRoleIDs()
store.commit('SET_USER_NAME', '')
store.commit('SET_USER_TOKEN', '')
store.commit('SET_ROLES_ID', '')
store.commit('SET_MENU_LIST', [])
next()
} else {
if (store.state.asyncMenuList.length === 0) {
if (store.state.rolesId === 'all') {
store.dispatch('GetRoutes', 'all').then(res => {
router.addRoutes(asyncRoutes) // 異步加載路由
next({...to, replace: true})
})
} else if (store.state.rolesId.length > 0 && store.state.rolesId !== 'all') {
let menu
if (typeof store.state.rolesId === 'string') {
menu = JSON.parse(store.state.rolesId)
} else {
menu = store.state.rolesId
}
store.dispatch('GetRoutes', menu).then(() => {
router.addRoutes(store.state.asyncMenuList) // 異步加載路由
next({...to, replace: true})
})
} else {
next()
}
} else {
next()
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單溉跃，直接進(jìn)入
next()
} else {
next(`/login?redirect=${to.path}`) // 否則全部重定向到登錄頁
}
}
})
7.main.js : 引入permission : import './permission'，使得每一次路由跳轉(zhuǎn)都會(huì)執(zhí)行路由守衛(wèi)
8.在頁面中獲得正確的動(dòng)態(tài)路由進(jìn)行渲染门粪，完成整個(gè)流程
