路由处理逻辑图如下:
路由处理逻辑图分析:
// 访问一个路由的时候 --> vue-element-admin框架定义了一个全局的路由守卫,也就是所有要经过路由的都需要访问router.beforeEach,这个方法他具体做了哪些事情
// 从Cookie中获取Token --> 判断Token是否存在
// 第一次访问路由login的时候Token为否 --> 判断路由是否是白名单,如果在白名单就可以直接访问,访问结束 --> 如果访问的路由不在白名单当中,那我们访问的路由 会是 /login?redirecrt=/xxx (后面带一个参数),就是在我们登陆之后会直接重定向到后面这个路由当中
// 如果有Token我们还访问login --> 会做一个校验路由是否为login --> 他就会重定向到根路径下
// 如果有Token 访问补位 login --> 这个时候就会获取角色 --> 生成动态路由 --> 去做权限的校验和匹配 --> 如果匹配到这个路由的时候回通过replace模式来访问这个路由 --> 如果在右侧的过程当中任何一步发生异常,就会进入异常处理逻辑 --> 异常处理逻辑主要有两步,第一步是重置Token,第二步是回到登陆页面
404(小技巧)
当我们上面的路由都匹配不到的时候 回去访问*这个路由,会重定向到404页面
路由逻辑源码
第一步,main.js 中加载了全局路由守卫
import './permission' // permission control
第二步,permission 定义了全局路由守卫
const whiteList = ['./login','/auth-redirect'] //whiteList 就是白名单
// 全局路由守卫,所有的路由都将结果这个方法处理 ,最后路由访问一定要调用next,不调是访问不到的
router.beforeEach(async(to, from, next) => {
//debugger模式(条件断点)
// 启动进度条 显示进度条的功能,首尾呼应
NProgress.start()
// 修改页面标题 根据配置项 meta下的title
document.title = getPageTitle(to.meta.title)
// 从 Cookie 获取 Token 没有直接undefined 走到else
const hasToken = getToken()
// 判断 Token 是否存在
if (hasToken) {
// 如果当前路径为 login 则直接重定向至首页 ,这一步走完会重定向到/本身的重定向
if (to.path === '/login') {
next({
path: '/' })
NProgress.done()
} else {
// 判断用户的角色是否存在
const hasRoles = store.getters.roles && store.getters.roles.length > 0
// 如果用户角色存在,则直接访问
if (hasRoles) {
next()
} else {
try {
// 异步获取用户的角色 因为第一次判断没有该角色的存在,所有到这个接口里去找
const {
roles } = await store.dispatch('user/getInfo')
// 根据用户角色,动态生成路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 调用 router.addRoutes 动态添加路由 生成路由表,最后会根据路由表生成左侧的菜单栏
router.addRoutes(accessRoutes)
// 使用 replace 访问路由,不会在 history 中留下记录 会回退到一个空页面
next({
...to, replace: true })
} catch (error) {
// 移除 Token 数据
await store.dispatch('user/resetToken')
// 显示错误提示
Message.error(error || 'Has Error')
// 重定向至登录页面
next(`/login?redirect=${
to.path}`)
NProgress.done()
}
}
}
} else {
// 如果访问的 URL 在白名单中,则直接访问 to就是你要到哪里去 (就是查看whiteList中是否包含你要访问的地址)
if (whiteList.indexOf(to.path) !== -1) {
// 当他不等于-1 这个时候就会直接访问
next()
} else {
// 如果访问的 URL 不在白名单中,则直接重定向到登录页面,并将访问的 URL 添加到 redirect 参数中
next(`/login?redirect=${
to.path}`)
NProgress.done()
}
}
})
// 路由访问成功之后 访问afterEach
router.afterEach(() => {
// 停止进度条
NProgress.done()
})
动态路由分析
动态路由流程图
动态路由生成逻辑如下图:
动态路由图解析
// 将constantRoutes和asyncRoutes都读取出来 --> 获取用户的角色 roles --> 判断roles是否为admin
// 是admin的话会直接将asyncRoutes保存到vuex当中 --> 将asyncRoutes 与 constantRoutes合并 (就是说你有admin权限会跳过所有的判断)
// 如果不是admin --> 会遍历所有的角色,取出所有的角色 --> 判断是否具有访问路由权限
// 没有访问路由权限,我们会遍历下一个
// 有访问权限会判断路由当中是否存在子路由
// 如果有子路由,我们会用迭代在去遍历子路由,子路由中会进行过滤后会将我们现在这个children进行更新,将不符合条件的子路由全部去除掉
// 最后当判断完成后,把路由存到一个新的数组当中,把这个数组替换原来的asyncRoutes,保存到vuex当中,最后将asyncRoutes和constantRoutes进行合并
动态路由源码分析
生成动态路由的源码位于 src/store/modules/permission.js 中的 generateRoutes 方法,源码如下:
import {
asyncRoutes, constantRoutes } from '@/router'
generateRoutes({
commit }, roles) {
// 返回 Promise 对象
return new Promise(resolve => {
let accessedRoutes
//判断roles当中是否包含admin
if (roles.includes('admin')) {
// 如果角色中包含 admin,则直接跳过判断,直接将 asyncRoutes 全部返回
accessedRoutes = asyncRoutes || []
} else {
// 如果角色中没有包含 admin,则调用 filterAsyncRoutes 过滤路由
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
// 将路由保存到 vuex 中
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
SET_ROUTES 方法源码如下:
SET_ROUTES: (state, routes) => {
// 将 routes 保存到 state 中的 addRoutes
state.addRoutes = routes
// 将 routes 集成到 src/router/index.js 的 constantRoutes 中
state.routes = constantRoutes.concat(routes)
}
路由过滤的方法 filterAsyncRoutes 源码如下:
/**
* @params routes - 异步加载的路由
* @params roles - 用户的角色,数组形式
*/
export function filterAsyncRoutes(routes, roles) {
const res = []
// 遍历全部路由
routes.forEach(route => {
// 对路由进行浅拷贝,注意 children 不会拷贝,因为不需要对 children 进行判断,所以可以使用浅拷贝
const tmp = {
...route }
// 检查用户角色是否具备访问路由的权限
if (hasPermission(roles, tmp)) {
// 当路由具有访问权限时,判断路由是否具备 children 属性
if (tmp.children) {
// 当路由包含 children 时,对 children 迭代调用 filterAsyncRoutes 方法
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
// 当路由具有访问权限时,将 tmp 保存到 res 中
res.push(tmp)
}
})
return res
}
检查权限方法 hasPermission 源码如下:
function hasPermission(roles, route) {
// 检查路由是否包含 meta 和 meta.roles 属性
if (route.meta && route.meta.roles) {
// 判断 route.meta.roles 中是否包含用户角色 roles 中的任何一个权限,如果包含则返回 true,否则为 false
return roles.some(role => route.meta.roles.includes(role))
} else {
// 如果路由没有 meta 或 meta.roles 属性,则视为该路由不需要进行权限控制,所有用户对该路由都具有访问权限
return true
}
}
相关库分析
NProgress
Slim progress bars for Ajax’y applications. Inspired by Google, YouTube, and Medium.
NProgress.start();
NProgress.done();
showSpinner 可以控制右侧的环形进度条是否显示
NProgress.configure({
showSpinner: false })
总结
关于路由处理
- vue-element-admin 对所有访问的路由进行拦截;
- 访问路由时会从 Cookie 中获取 Token,判断 Token 是否存在:
+ 如果 Token 存在,将根据用户角色生成动态路由,然后访问路由,生成对应的页面组件。这里有一个特例,即用户访问 /login 时会重定向至 / 路由;
+ 如果 Token 不存在,则会判断路由是否在白名单中,如果在白名单中将直接访问,否则说明该路由需要登录才能访问,此时会将路由生成一个 redirect 参数传入 login 组件,实际访问的路由为:/login?redirect=/xxx。 - 关于动态路由和权限校验
+ vue-element-admin 将路由分为:constantRoutes 和 asyncRoutes
+ 用户登录系统时,会动态生成路由,其中 constantRoutes 必然包含,asyncRoutes 会进行过滤;
+ asyncRoutes 过滤的逻辑是看路由下是否包含 meta 和 meta.roles 属性,如果没有该属性,所以这是一个通用路由,不需要进行权限校验;如果包含 roles 属性则会判断用户的角色是否命中路由中的任意一个权限,如果命中,则将路由保存下来,如果未命中,则直接将该路由舍弃;
+ asyncRoutes 处理完毕后,会和 constantRoutes 合并为一个新的路由对象,并保存到 vuex 的 permission/routes 中;
+ 用户登录系统后,侧边栏会从 vuex 中获取 state.permission.routes,根据该路由动态渲染用户菜单。
vue admin
登陆流程
界面精简及路由处理(实现了权限控制)
路由和权限校验原理
侧边栏
重定向
面包屑导航
requst库 axios拦截
登录组件实现细节