乙個專案學會前端實現登入攔截

乙個專案學會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
},];

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清除，再跳轉到首頁即可。

對於axios，很多剛開始學習vue的人都覺得文件比較難以看懂。我剛開始也是這麼覺得的。但通過這麼乙個專案下來後，發現axios並不難理解。建議在學習axios的時帶著下面的目的去看文件會更高效。因為掌握了下面這些內容，基本上就可以無障礙得在專案中使用axios了。

axios文件

# install dependencies

npm install
# serve with hot reload at localhost:8080
npm run
dev# build for production with minification
npm run
build

vue axios 乙個專案學會前端實現登入攔截

乙個專案學會vue全家桶 axios實現登入 攔截 登出功能，以及利用axios的http 攔截請求和響應。該專案是利用了github 提供的personal token作為登入token，通過token訪問你的repository list。通過這個專案學習如何實現乙個前端專案中所需要的 登入及攔...

vue axios 乙個專案學會前端實現登入攔截

乙個專案學會vue全家桶 axios實現登入 攔截 登出功能，以及利用axios的http 攔截請求和響應。該專案是利用了github 提供的personal token作為登入token，通過token訪問你的repository list。通過這個專案學習如何實現乙個前端專案中所需要的 登入及攔...

vue axios 乙個專案學會前端實現登入攔截

第一步 路由攔截const routes component repository router.beforeeach to,from,next else 將跳轉的路由path作為引數，登入成功後跳轉到該路由 else 這時候就需要結合 http 後端介面返回的http 狀態碼來判斷。第二步 htt...