Vue導航守衛實現登入跳轉

在一個網站中，如果使用者在未登入的情況下是不允許操作登入後的功能，使用者如果點選後應該提示使用者進行登入而且跳轉到登入頁面。

這個功能在Vue中可以使用導航守衛來實現

官方文件：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

這裡我利用的是全域性前置守衛進行控制跳轉

全域性前置守衛

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

const router = new VueRouter({ ... })

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

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

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

• to: Route: 即將要進入的目標 路由物件
• from: Route: 當前導航正要離開的路由
• next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
  • next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。
  • next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是使用者手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from
    路由對應的地址。
  • next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置物件，且允許設定諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
  • next(error): (2.4.0+) 如果傳入 next 的引數是一個 Error 例項，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥。

通過以上的講解，我們可以通過to來過去要訪問的路徑，然後使用next來控制是否允許去到下一個路徑或者跳轉到其他路徑。

我的做法是：在導航守衛中判斷是否存在名為toekn的cookie，如果存在就正常跳轉，不存在就跳轉到登入頁面，具體做法如下

router.beforeEach(((to, from, next) => {
    let path = to.path;
    let freePath = ["/login", "/register", "/"];
    if (freePath.includes(path)) {
        return next();
    } else {
        if (!Vue.$cookies.isKey("token")) {
            Vue.prototype.$notify.error("未登入，請先登入")
            return next("/login");
        } else {
            return next();
        }
    }
}));

這裡的$cookies需要通過使用npm install vue-cookies進行安裝然後再main.js中進行配置

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

再退出時將token刪除

this.$cookies.remove("token");

當然了導航守衛還有其他用處，等待以後發掘