2021SC@SDUSC
目录
在AJ-Report项目分析(7)中我们分析了登录相关的内容,其中分析了token的使用。本文将从token出发,分析每次请求,是如何通过token来验证是否需要登录的。
我们本次分析的是src/permisson.js文件源码
每次跳转页面的样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
这两行代码指定了每次跳转页面时的进度条样式。 就是浏览器上方的蓝色线条,如下:
之后的源码:
var whiteList = ['/login', '/aj/**', '/bigscreen/viewer']
router.beforeEach((to, from, next) => {
NProgress.start()
var token = getToken();
var gaeaUser = getAccessUser();
// 如果有token
if (token) {
if (to.path == '/login') {
next('/index')
NProgress.done()
}else{
next()
}
}else {
console.log(to.path)
if (whiteList.includes(to.path)) {
next()
}else {
if ((token == null || token == '' || token ==undefined || gaeaUser == {}) && (to.meta != null && to.meta.requireAuth == true)) {
next(`/login?redirect=${to.path}`);
NProgress.done();
} else {
next();
}
}
}
})
先是定义了一个whiteList数组,之后使用了router的beforeEach函数,这是router的导航守卫。
router导航守卫
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
在全局守卫里面,beforeEach 是全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用。
函数参数的含义如下:
1.“to”: 即将要进入的目标 路由对象;
2. "from": 当前导航正要离开的路由对象;
3. “next”: Function: 确保要调用 next 方法,否则钩子就不会被 resolved。
回到代码,首先调用了Nprocess的start方法,意思是每次跳转都要执行这个方法来显示上文所说的跳转特效。
接着使用了getToken()来获取token,这个方法我在AJ-Report项目分析(7)中已经分析过了。
接着:如果有token,会先判断即将进入的导航对象是否是登录界面,如果是的话就取消特效,并执行传入的next方法。
之后继续判断定义的whiteList数组中是否包含即将进入的到导航对象。这意味这whiteList数组中的三个path都是有“特权”的。
下面这段代码:
if ((token == null || token == '' || token ==undefined || gaeaUser == {}) && (to.meta != null && to.meta.requireAuth == true)) {
next(`/login?redirect=${to.path}`);
意味着还要判断是否在免登陆白名单,这是通过:
to.meta != null && to.meta.requireAuth == true
来判断的。如果没有在白名单并且没有token,则都跳转到登录界面。
afterEach 全局后置钩子
文件最后的源码如下:
router.afterEach(() => {
NProgress.done()
})
我们在前面分析了beforeEach方法,这里是afterEach方法,afterEach是全局后置钩子,和前置钩子区别在于这些钩子不会接受 next
函数也不会改变导航本身 。