AJ-Report项目分析（8）

 2021SC@SDUSC
 

目录

router导航守卫

afterEach 全局后置钩子

---

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