基於vue和axious的http攔截和路由攔截

乙個專案學會vue全家桶+axios實現登入、攔截、登出功能，以及利用axios的http***攔截請求和響應。

該專案是利用了github 提供的personal token作為登入token，通過token訪問你的repository list。通過這個專案學習如何實現乙個前端專案中所需要的登入及攔截、登出、token失效的攔截及對應 axios ***的使用。

準備你需要先生成自己的 github personal token（生成token）。 token 生成後訪問 demo，即可檢視你的repository list。

.├── readme.md

├── dist

// 打包構建後的資料夾

│ ├── build.js

│ └── build.js.

map├── index.html

├──

package.json

├── src

│ ├── assets

│ │ ├── css.css

│ │ ├── icon.css

│ │ └── logo.png

│ ├── constant

│ │ └── api.js

// 配置api介面檔案

// 封裝fetch、post請求及http ***配置檔案

│ ├── index.vue

│ ├── login.vue

│ ├── main.js

│ ├── repository.vue

│ ├── router.js

// 路由配置檔案

│ └── store

│ ├── store.js

│ └── types.js

// vuex types

└── webpack.config.js

第一步：路由攔截

首先在定義路由的時候就需要多新增乙個自定義字段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（未授權），讓使用者重新登入。

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

});

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

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

原始碼位置

基於vue和axious的http攔截和路由攔截

基於Vue和Ajax的分頁

Android需要知道的TCP IP和Http知識

基於vue的UI框架

基於vue和axious的http攔截和路由攔截

基於Vue和Ajax的分頁

Android需要知道的TCP IP和Http知識

基於vue的UI框架

相關推薦