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;