vue vuex axios實現登入攔截

登入及攔截、登出、token失效的攔截及對應 axios ***的使用。

第一步：路由攔截

首先在定義路由的時候就需要多新增乙個自定義字段requireauth，用於判斷該路由的訪問是否需要登入。如果使用者已經登入，則順利進入路由，

否則就進入登入頁面。

const routes = [,,
component: repository
},];

定義完路由後，我們主要是利用vue-router提供的鉤子函式beforeeach()對路由進行判斷。

router.beforeeach((to, from, next) => 
else   // 將跳轉的路由path作為引數，登入成功後跳轉到該路由})}
}else 
})

每個鉤子方法接收三個引數：

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

完整的方法見/src/router.js

其中，to.meta中是我們自定義的資料，其中就包括我們剛剛定義的requireauth字段。通過這個欄位來判斷該路由是否需要登入許可權。需要的話，同時當前應用不存在token，則跳轉到登入頁面，進行登入。登入成功後跳轉到目標路由。

登入攔截到這裡就結束了嗎？並沒有。這種方式只是簡單的前端路由控制，並不能真正阻止使用者訪問需要登入許可權的路由。還有一種情況便是：當前token失效了，但是token依然儲存在本地。這時候你去訪問需要登入許可權的路由時，實際上應該讓使用者重新登入。

這時候就需要結合 http *** + 後端介面返回的http 狀態碼來判斷。

第二步：***

要想統一處理所有http請求和響應，就得用上 axios 的***。通過配置http response inteceptor，當後端介面返回401 unauthorized（未授權），讓使用者重新登入。

}return promise.reject(error.response.data) // 返回介面返回的錯誤資訊

});

完整的方法見/src/http.js.

通過上面這兩步，就可以在前端實現登入攔截了。登出功能也就很簡單，只需要把當前token清除，再跳轉到首頁即可。