beforeEach导航守卫

导航守卫

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

一、全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  1）next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  2）next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  3）next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  4）next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

二、全局导航示例

1. 创建permission.js文件

// permission.js

import router from "@/router";
import { GetToken } from "@/common/tokenCookie.js"

// beforeEach导航守卫
router.beforeEach((to, from, next) => {
  console.log(`to: ${to.fullPath}   form: ${from.fullPath}`);
  const matchArray = to.matched;
  console.log("matchArray>>>", matchArray);
  /** 判断数组中有没有记录满足条件，并将结果返回，有返回真，
      否则返回false，用常量isRerult接收，路由中的requiresAuth属性值为true的话表示该路由跳转不需要登录*/
  const isRerult = matchArray.some(item => !item.meta.requiresAuth);
  console.log("isRerult>>>", isRerult);
  // 当isRerult为假的时候，会执行next();为真的时候进行登录判断
  if (isRerult) {
    // 获取登录状态时行判断
    const loginUserState = GetToken();
    console.log('loginUserState token值>>>>', loginUserState);
    if (loginUserState) {
      next();
    } else {
      next('/login'); // 如果没有登录，跳转到登录界面
    }
  } else {
    next();
  }
})

• 当路由进行跳转的时候，会执行全局导航的代码，to.matched表示已经跳转过匹配到的路由
• 判断路由中的requiresAuth属性，为true的时候，表示能够直接跳转，不需要登录
  
• 当isRerult为false时，表示需要登录，此时从localstorge获取token，（token为登录成功后获取到，然后存储的localstorge中的），token存在的话表示已经登录了，直接放行跳转，不存在的话就跳转到login页面

2. 在项目的入口文件去引入permission.js文件

• main.js