乙個專案學會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
})
* to: route: 即將要進入的目標 路由物件
* from: route: 當前導航正要離開的路由
* next: function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
* next(): 進行管道中的下乙個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
* next(false): 中斷當前的導航。如果瀏覽器的 url 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 url 位址會重置到 from 路由對應的位址。
* next(『/』) 或者 next(): 跳轉到乙個不同的位址。當前的導航被中斷，然後進行乙個新的導航。
確保要呼叫 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了。
* 發起http請求的方法
* http 請求成功時返回的資料及其型別
* http請求失敗的處理
* ***的使用
* http的配置
axios文件
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
歡迎star + issues.
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...
vue axios 乙個專案學會前端實現登入攔截
你需要先生成自己的 github personal token 生成token token 生成後 訪問 demo，即可檢視你的repository list。readme.md dist 打包構建後的資料夾 build.js build.js map index.html package.json...