路由守衛

什么是路由守衛？

路由守衛就是路由跳轉的一些驗證，比如登錄鑒權（沒有登錄不能進入個人中心頁）等等等
路由守衛分為三大類：

1. 全局守衛：前置守衛：beforeEach 后置鈎子：afterEach

2. 單個路由守衛：獨享守衛：beforeEnter

3. 組件內部守衛：beforeRouteEnter beforeRouteUpdate beforeRouteLeave
所有的路由守衛都是三個參數：

to： 要進入的目標路由（去哪兒）

from： 要離開的路由（從哪來）

next： 是否進行下一步（要不要繼續）

🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️

寫next()相當於 next(true) 繼續執行

不寫 相當於next(false)終止執行

next(path)跳轉 例如：next("/login")

注意：后置鈎子afterEach沒有next參數
我們來詳細看看都是怎么使用的叭
全局守衛：

1、全局前置守衛beforEach：

給需要守衛的路由加上： meta: { permission: true },

router.beforeEach((to, from, next) => {
  if (to.meta.permission) {
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      alert("請先登錄");
      next("/login");
    }
  } else {
    next();
  }
});

2、 全局后置鈎子afterEach（少用）

router.afterEach((to, from) => {
  // to and from are both route objects.
});

單個路由守衛：

  // 首頁模塊路由
  {
    path: "/index",
    name: "index",
    meta: { permission: true },
    component: () => import("../views/Index.vue"),
    beforeEnter: function(to, from, next) {
      if (sessionStorage.getItem("token")) {
        next();
      } else {
        alert("請先登錄");
        next("/login");
      }
    }
  },

組件內部守衛：

和data、created、mounted、methods處於平等關系

用beforeRouteEnter舉例說明：

  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛執行前，組件實例還沒被創建
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      alert("請先登錄");
      next("/login");
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在當前路由改變，但是該組件被復用時調用
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
  },

beforeRouteEnter 是進入前

beforeRouteUpdate 是路由變化時

beforeRouteLeave 是離開后。這個離開守衛通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消。

注意：
beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用，因此即將登場的新組件還沒被創建。
完整的導航解析流程

    導航被觸發。
    在失活的組件里調用 beforeRouteLeave 守衛。
    調用全局的 beforeEach 守衛。
    在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
    在路由配置里調用 beforeEnter。
    解析異步路由組件。
    在被激活的組件里調用 beforeRouteEnter。
    調用全局的 beforeResolve 守衛 (2.5+)。
    導航被確認。
    調用全局的 afterEach 鈎子。
    觸發 DOM 更新。
    調用 beforeRouteEnter 守衛中傳給 next 的回調函數，創建好的組件實例會作為回調函數的參數傳入。