在做Vue中的登陸校驗時，思路應該是這樣的：先確定一個路由頁面是否需要登陸才能訪問，如果需要，就需要用戶登陸，如果不需要，用戶直接可以訪問。

那么，首先來說，后臺系統中，不一定每一個頁面都要進行登陸權限，所以我們要通過路由的meta標簽對需要做校驗的路由頁面做好標記，在配置路由時，我們可以在meta屬性中，加入是否需要登陸的字段，如果requireAuth是true，就說明這條路由需要登陸才能訪問：

{path: '/userInfo',name: 'userInfo',meta: {requireAuth: true, // 該路由項需要權限校驗}component: userInfo }, {path: '/userList',name: 'userList', // 該路由項不需要權限校驗 component: userInfo }

之后，我們可以定義一個路由守衛，每次路由跳轉，我們都來做一次權限校驗，參考如下代碼

router.beforeEach((to, from, next) => {if(to.meta.requireAuth) { // 如果路由項需要權限校驗/* 從Vuex拿出token碼，說明已登陸（前端的token可偽造，所以這并不是完全靠譜，后面繼續說）*/if (store.state.token) { next() // 正常跳轉頁面} else {next({path: '/login',query: {redirect: to.fullPath} /* 將跳轉的路由地址作為參數帶給登陸頁，登錄成功后跳轉回該頁面 */})}} else { // 如果不需要權限校驗，直接進入路由頁面next();} })

如果用戶的Vuex中登陸狀態（token）存在，就說明登陸了，如果沒有值，就跳轉去登陸頁面。用戶在登陸頁面登陸后，要在Vuex中保存登陸狀態（token）。（實際上如果做持久存儲，還應該把登陸狀態存在localStorage或者cookie中）

然而，單純這么來做并不靠譜，首先，token可以用戶自己偽造，其次，有可能token在前端存在，但是由于登陸時間過長， 已經超出登陸最長時效期，這時，后端中，這個token已經失效。

所以，這么做權限校驗并不準確，那么接下來，我們可以在發請求的時候，通過后端的一層校驗，進一步確保權限狀態的準確性。

這一步，要用到axios里面的攔截器，所以以下代碼建立在項目使用axios的基礎上。axios的攔截器（Interceptors），默認配置（axios.defaults）還有 axios.create() 創建出的實例實際上在封裝請求時非常有用，如果你沒接觸過，趕緊到官方文檔看一下！

我們先來看，在每次請求時，我們進行如下的攔截，這么做的意思是，如果前端有token，我每次都把token給后端，后端拿到這個token后會到后端再進行一次權限校驗，然后把校驗結果在接口中反饋：

axios.interceptors.request.use( requestConfig => {if (store.state.token) {config.headers.Authorization = `${store.state.token}`;}return requestConfig; }, err => {return Promise.reject(err); });

然后我們再來看，對應一定要再寫一個response攔截器，處理響應數據。如果后端拿到前端的token，發現token失效，我們要求后端接口返回401的返回碼，這樣，前端就可以這么處理了：

axios.interceptors.response.use( response => {return response;}, error => {if (error.response) {switch (error.response.status) {case 401: /* 返回 401 表示前端的token已失效當然，你也可以和后端也定其他的方式來表示token失效需要前端清除Vuex中的token，頁面跳轉到登陸頁*/ store.commit(types.LOGOUT);router.replace({path: 'login',query: {redirect: router.currentRoute.fullPath}})}}return Promise.reject(error.response.data) //返回接口返回的錯誤信息 });

借助axios的攔截器，我們不但前端做了登陸校驗，而且每次請求后端接口的時候，都會攜帶數據讓后端再次做登陸校驗，這樣的一個登陸校驗流程就很標準了

?

轉載于:https://www.cnblogs.com/binglove/p/10542977.html

總結

以上是生活随笔為你收集整理的借助axios的拦截器实现Vue.js中登陆状态校验的思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。