大致以文件的形式进行描述
1.router/index.js : 该文件定义了router, 分别为 constRoutes(静态路由表，包括登录，404等) 和 asyncRouters （动态路由表，需要进行权限管理的都将定义在这里）
2.store/state.js : 在 state 中定义 asyncMenuList （动态权限列表）和 rolesId (后台返回权限码 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中将后台返回的rolesId存储在vuex中， 然后在 actions 中定义GetRoutes action：
GetRoutes ({commit}, data) {
// 该 action 被外部调用，调用后，会更新vuex中存储的asyncMenuList
return new Promise((resolve, reject) => {
//判断如果data为 ‘all’，则为超级管理员，否则调用menuFiltters方法对data进行动态路由匹配
if (data === 'all') {
//调用mutation中定义的 SET_MENU_LIST 方法，更新vuex中存储的asyncMenuList
commit('SET_MENU_LIST', asyncRoutes)
} else {
let menuRoutes
menuRoutes = menuFiltters(asyncRoutes, data)
// 将匹配成功的路由更新到vuex中存储的asyncMenuList中
commit('SET_MENU_LIST', menuRoutes)
}
resolve()
})
}
5.store/actions : 在action外部定义函数 menuFiltters 和 hasPermission
// 使用递归，匹配权限码，返回符合权限码的路由
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 中的权限码是否在数组 roles 中存在，存在返回true，否则返回false
function hasPermission (roles, router) {
return roles.some(role => router.meta.roles.includes(Number(role)))
}
6.permission.js : 定义路由守卫，调用 actions 中的 GerRoutes , 匹配动态权限路由，代码如下
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) => {
// 每次加载路由判断是否已经获取用户信息 若未获取用户信息则跳转到登录
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) { // 在免登录白名单，直接进入
next()
} else {
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
}
}
})
7.main.js : 引入permission : import './permission'，使得每一次路由跳转都会执行路由守卫
8.在页面中获得正确的动态路由进行渲染，完成整个流程
网友评论