vue 路由守衛 token過期處理

2021-10-14 07:58:29 字數 990 閱讀 7216

想要實現只有在登入或者註冊成功的狀態下，才能進入系統，這時候就可以使用路由守衛

在route.js中進行配置

import vue from 'vue'


import vuerouter from 'vue-router'


import index from '../views/index.vue'


import register from '../views/register.vue'


import notfound from '../views/404.vue'


import from 'core-js/fn/array'


vue.use(vuerouter)


const routes = [


, ,


, ]const router = new vuerouter()


// 路由守衛核心**


router.beforeeach((to,from,next) => else 


})export default router
在成功登陸以後，如果想要訪問有token許可權的介面，則需要在請求攔截和響應攔截中再進行處理

在請求攔截中，新增統一的請求頭

// 請求攔截


axios.interceptors.request.use(config => 


return config


}, error => )
如果返回的介面資料中，狀態碼未401，說明token過期或失效，則需要清除瀏覽器中快取的token

// 響應攔截


axios.interceptors.response.use( response => , error => = error.response


if (status == 401) 


return promise.reject(error)


})

Vue路由守衛

js const router new vuerouter 前置的鉤子函式 最後要執行next 才會跳轉 router.beforeeach to,from,next 後置的鉤子函式 已經跳轉了不需要next router.aftereach to,from 主要是簡單介紹一下，路由守衛主要用於檢驗...

vue 路由守衛

正如其名，vue router提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中 全域性的,單個路由獨享的,或者元件級的。記住引數或查詢的改變並不會觸發進入 離開的導航守衛 可以使用router.beforeeach註冊乙個全域性前置守衛 import router f...

Vue路由守衛

我們在看一些網頁的時候如果想進一步了解一些東西的詳情資訊的話,當前的網頁就會讓我們進行登入,我們必須及逆行登入後才能夠看到我們想看到的詳情資訊,這個操作我們稱之為 路由守衛也是我們在做一些專案的時候必要進行的一步,如果我們不做這一步的話,自己所作專案中的所有的資料,不管是可以公共訪問的還是不能進行公...