登录流程分析
登录流程图
路由和权限校验
路由逻辑图
路由场景分析
中后台路由常见的常见如下：
- 已获取 Token：
- 访问
/login：重定向到/ - 访问
/login?redirect=/xxx：重定向到/xxx - 访问
/login以外的路由：直接访问/xxx
- 访问
- 未获取 Token：
- 访问
/login：直接访问/login - 访问
/login以外的路由：如访问/dashboard，实际访问路径为/login?redirect=%2Fdashboard，登录后会直接重定向/dashboard
- 访问
路由守卫实现
- 第一步，
main.js中加载了全局路由守卫
import './permission' // 路由守卫 权限控制
- 第二步，
permission定义了全局路由守卫
NProgress.configure({ showSpinner: false }) // 禁止右侧加载时转圈的动画
const whiteList = ['/login', '/auth-redirect'] // 白名单
router.beforeEach(async (to, from, next) => {
// 启动进度条
NProgress.start()
document.title = getPageTitle(to.meta.title)
// 从 Cookie 获取 Token
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// 如果当前路径为 login 则直接重定向至首页即/dashboard
next({ path: '/' }) // 再次触发 beforeEach，to.path===/dashboard，执行下面的else
NProgress.done()
} else {
// 判断用户的角色是否存在
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) { // 如果用户角色存在，则直接访问
next()
} else { // 第一次登陆，角色是不存在的，必须执行下面获取角色
try {
// 异步获取用户的角色
// 角色是一个对象中的数组，如:
// 'xxtoken': { roles: ['admin','editor']}
// 所以通过 { roles } 获取角色
const { roles } = await store.dispatch('user/getInfo')
// 根据用户角色，动态生成路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 调用 router.addRoutes 动态添加路由，把不符合条件的路由清除，最后和原来的路由合并形成新的路由表
router.addRoutes(accessRoutes)
// 使用 replace 访问路由，不会在 history 中留下记录，
// 这样回退不会回到 login 页面
next({ ...to, replace: true })
} catch (error) {
// 错误处理
// 清除 Token 数据，回到登录页重新登录
await store.dispatch('user/resetToken')
Message.error(error || '出错啦')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
// 没有token的情况
if (whiteList.indexOf(to.path) !== -1) { // 如果访问的 URL 在白名单中，则直接访问
next()
} else {
// 如果访问的 URL 不在白名单中，则直接重定向到登录页面，并将访问的 URL 添加到 redirect 参数中
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// 设置进度条动画完成
NProgress.done()
})
动态路由
动态路由流程图
动态路由实现
import { asyncRoutes, constantRoutes } from '@/router'
/**
* 使用 meta.roles 判断当前角色是否有权限
* @param roles
* @param route
*/
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role)) // 用户的角色和路由中获取的角色是否匹配
} else {
// 没有设置权限，则具有所有权限
return true
}
}
/**
* 递归过滤异步路由表
* @param routes asyncRoutes
* @param roles
*/
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
// 对路由进行浅拷贝，注意 children 不会拷贝，因为不需要对 children 进行判断，所以可以使用浅拷贝
const tmp = { ...route }
if (hasPermission(roles, tmp)) { // 有权限后才会判断子路由
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes // addRoutes 用来保存 routes
state.routes = constantRoutes.concat(routes) // 侧边栏菜单根据此 routes 生成
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
// 如果角色中包含 admin，则直接跳过判断，直接将 asyncRoutes 全部返回
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes || []
} else {
// 如果角色中没有包含 admin，则调用 filterAsyncRoutes 过滤路由
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
// 将路由保存到 vuex 中
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
总结
关于路由处理
-
vue-element-admin对所有访问的路由进行拦截； - 访问路由时会从 Cookie 中获取 Token，判断 Token 是否存在：
- 如果 Token 存在，将根据用户角色生成动态路由，然后访问路由，生成对应的页面组件。这里有一个特例，即用户访问
/login时会重定向至/路由； - 如果 Token 不存在，则会判断路由是否在白名单中，如果在白名单中将直接访问，否则说明该路由需要登录才能访问，此时会将路由生成一个
redirect参数传入login组件，实际访问的路由为：/login?redirect=/xxx
- 如果 Token 存在，将根据用户角色生成动态路由，然后访问路由，生成对应的页面组件。这里有一个特例，即用户访问
关于动态路由和权限校验
-
vue-element-admin将路由分为：constantRoutes和asyncRoutes - 用户登录系统时，会动态生成路由，其中
constantRoutes必然包含，asyncRoutes会进行过滤； -
asyncRoutes过滤的逻辑是看路由下是否包含meta和meta.roles属性，如果没有该属性，所以这是一个通用路由，不需要进行权限校验；如果包含roles属性则会判断用户的角色是否命中路由中的任意一个权限，如果命中，则将路由保存下来，如果未命中，则直接将该路由舍弃； -
asyncRoutes处理完毕后，会和constantRoutes合并为一个新的路由对象，并保存到vuex的permission/routes中； - 用户登录系统后，侧边栏会从
vuex中获取state.permission.routes，根据该路由动态渲染用户菜单。
