vue3中如何使用路由守卫

什么是路由守卫？为什么要使用路由守卫？

在项目中，每一次路由的切换或者页面的刷新都需要我们判断用户是否已经登录

导航钩子提供的三个参数：

to：即将要进入的目标路由对象；
from：当前导航即将要离开的路由对象；
next ：只有在调用该方法后，路由才会改变，才能进入下一个钩子函数（afterEach）。

1. 路由独享守卫

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

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/home/Home.vue"), //动态加载组件
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/login/Login.vue"), //动态加载组件
    beforeEnter: (to, from, next) => {
      const { isLogin } = localStorage;
      isLogin ? next({ name: "Home" }) : next();
    },
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

2.全局路由守卫

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

/* router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。 */
router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage;
  isLogin || to.name === "Login" ? next() : next({ name: "Login" });
});

export default router;