vue2.0 實現路由守衛

路由跳轉前做一些驗證，比如登入驗證，是網站中的普遍需求。

對此，vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛（navigation-guards）

全域性守衛

你可以使用 router.beforeEach 註冊一個全域性前置守衛：

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

當一個導航觸發時，全域性前置守衛按照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

每個守衛方法接收三個引數：

to: Route: 即將要進入的目標 路由物件

from: Route: 當前導航正要離開的路由

next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。

next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。

next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。

next(error): (2.4.0+) 如果傳入 next 的引數是一個 Error 例項，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥。

確保要呼叫 next 方法，否則鉤子就不會被 resolved。

例子

1.列舉需要判斷登入狀態的“路由集合”，當跳轉至集合中的路由時，如果“未登入狀態”，則跳轉到登入頁面Login；

2.當直接進入登入頁面Login時，如果“已登入狀態”，則跳轉到首頁Home；

全部程式碼

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

//路由表
const routes = [
  // 重定向定的是Home頁面
  {
    path: "/",
    redirect: "/Home"
  },
  {
    path: "/Login",
    name: "Login",
    component: () => import("@/components/Login.vue") //對應的元件模板
  },
  {
    path: "/Home", //連結路徑
    name: "Home",
    component: () => import("@/components/Home.vue") //對應的元件模板
  }
];
const router = new VueRouter({
  routes //路由表 必寫的
});

//路由守衛
router.beforeEach((to, form, next) => {
  const nextRoute = ["Home"];
  // const auth = store.state.auth;
  // console.log(to.name);
  //未登入
  if (nextRoute.indexOf(to.name) >= 0) {
    //未登入
    // console.log(localStorage.getItem("name"));
    let name = localStorage.getItem("name");
    if (name == null) {
      router.push({ name: "Login" });
    }
  } 
  // 已登入狀態；當路由到login時，跳轉至home
  if (to.name === "Login") {
    let name = localStorage.getItem("name");
    if (name != null) {
      router.push({ name: "Home" });
    }
  }
  next();
});

//匯出router
export default router;