Vue中的全局导航守卫（beforeEach、afterEach）

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。

vue-router 提供了导航钩子:全局前置导航钩子 beforeEach 和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在 beforeEach 导航钩子中进行判断。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

beforeEach：

实现用户验证的代码：

router.beforeEach((to, from, next) => {
      //我在这里模仿了一个获取用户信息的方法
   let isLogin = window.sessionStorage.getItem('userInfo');
      if (isLogin) {
          //如果用户信息存在则往下执行。
          next()
      } else {
          //如果用户token不存在则跳转到login页面
          if (to.path === '/login') {
             next()
         } else {
             next('/login')
         }
     } 
 })

afterEach:
和 beforeEach 不同的是 afterEach 不接收第三个参数 next 函数，也不会改变导航本身，一般 beforeEach 用的最多，afterEach 用的少

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})