vue路由守卫详解

Vue路由守卫

1 什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

2 分类

2-1 全局路由守卫

beforeEach(to, from, next) 全局前置守卫，路由跳转前触发
beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
afterEach(to, from) 全局后置守卫，路由跳转完成后触发

2-2 路由独享守卫

beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发

2-3 组件路由守卫

beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
beforeRouteUpdadte(to,from,next) 当前路由改变时触发
beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发

2-4 参数

to： 即将要进入的目标路由对象
from： 即将要离开的路由对象
next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

3 详解

3-1 路由前置守卫 beforeEach(to, from, next)

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

在路由跳转前触发，在实际项目中应用最多，主要是登陆验证和跳转权限判断

3-2 全局解析守卫 beforeResolve(to, from, next)

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

类似于路由前置守卫 beforeEach(to, from, next)，也是路由跳转前触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机：在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后，afterEach(to, from)之前调用

3-3 全局后置守卫 afterEach(to, from, next)

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

于路由前置守卫 beforeEach(to, from, next)相对，路由跳转后触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机：在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后， beforeRouteEnter(to, from)之前调用

3-4 路由独享守卫 beforeEnter(to, from, next)

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

于路由前置守卫 beforeEach(to, from, next)相同，但在beforeEach(to, from, next)后触发

3-5 组件路由守卫 beforeRouteEnter(to, from, next)

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 不能获取组件实例 
    // 因为当守卫执行前，组件实例还没被创建
  }
 }

因为该守卫在组件创建之前阶段触发，那个时候组件还没有创建成功，所以这个守卫内不能使用this获取组件实例

调用时机：在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后，全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用

3-6 组件路由守卫 beforeRouteUpdate(to, from, next)

beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 
  },

调用时机：在当前路由复用时

3-7 组件路由守卫 beforeRouteLeave(to, from, next)

  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
  }

通常用来禁止用户在还未保存修改前突然离开
调用时机：导航离开该组件的对应路由时调用

4 完整的导航解析流程

1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数

参考链接

5 实际应用

router.beforeEach((to, from, next) => {
  NProgress.start(); // NProgress实现显示加载进度条效果
  console.log("routemgr to", to.path);
  if ("这里判断是不是开发环境") {
    //开发环境下，直接路由
    next();
  } else {
    if (to.path == "/login") {
      //登录页面
      session.set("isOpen", "ok");
      next();
    } else if ("这里判断如不是生产环境下录页面需要判断权限") {
      //非生产环境下
      next();
    } else {
      //非登录页面需要判断权限
      console.log("routemgr user", lu.userinfo);
      if (gadget.isEmptyObject(lu.userinfo)) {
        //首次打开页面的时候，不需要弹出错误页面提示，直接跳转至登录页面即可
        let ret = session.get("isOpen");
        if (ret == "ok") {
          //vuex用户信息判断，如果不存在，则重新登录
          MessageBox.alert("用户未登录,需要重新登录.", "错误", {
            confirmButtonText: "确定",
            type: "error",
          }).then(() => {
            console.log("重新登录");
            //next(`/procmgr/login?redirect=${to.path}`);
            next(`/login`);
            NProgress.done();
          });
        } else {
          next(`/login`);
          NProgress.done();
        }
      } else {
        //权限判断
      }
    }
  }
});

原文链接：https://blog.csdn.net/qq_45466204/article/details/122884150