AJ-Report项目分析(8)

2021SC@SDUSC
 

目录

router导航守卫

afterEach 全局后置钩子


AJ-Report项目分析(7)中我们分析了登录相关的内容,其中分析了token的使用。本文将从token出发,分析每次请求,是如何通过token来验证是否需要登录的。

我们本次分析的是src/permisson.js文件源码

每次跳转页面的样式

import NProgress from 'nprogress'  
import 'nprogress/nprogress.css' 

这两行代码指定了每次跳转页面时的进度条样式。 就是浏览器上方的蓝色线条,如下:

AJ-Report项目分析(8)

 之后的源码:

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 函数也不会改变导航本身 。

上一篇:2021-06-13


下一篇:Django model 中的 class Meta 详解