需求

要想統一處理所有http請求和響應，就得用上 axios 的攔截器。通過配置 http response inteceptor ，當后端接口返回 401 Unauthorized（未授權） ，讓用戶重新登錄。通過這個項目學習如何實現一個前端項目中所需要的 登錄及攔截、登出、token失效的攔截及對應 axios 攔截器的使用。
代碼如下：

const instance = axios.create({baseURL: 'http://www.laravel5.5.com/api/',timeout: 10000, });//POST傳參序列化(添加請求攔截器) // 在發送請求之前做某件事 instance.interceptors.request.use(config => { // // 設置以 form 表單的形式提交參數，如果以 JSON 的形式提交表單，可忽略if(config.method === 'post'){// JSON 轉換為 FormDataconst formData = new FormData();Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))config.data = formData}// 下面會說在什么時候存儲 tokenif (localStorage.token) {config.headers['Authorization'] = localStorage.token;config.headers['Accept'] = 'application/json';// config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// store.dispatch('logined', localStorage.token)}return config },error =>{alert("錯誤的傳參", 'fail')return Promise.reject(error) })// 自定義的 axios 響應攔截器 instance.interceptors.response.use((response) => {// 判斷一下響應中是否有 token，如果有就直接使用此 token 替換掉本地的 token。你可以根據你的業務需求自己編寫更新 token 的邏輯var token = response.headers.authorization;if (token) {// 如果 header 中存在 token，那么觸發 refreshToken 方法，替換本地的 tokenaxios.defaults.headers.common['Authorization'] = token;}return response }, (error) => {if (error.response) {switch (error.response.status) {case 401:// 這里寫清除token的代碼router.replace({path: 'login',query: {redirect: router.currentRoute.fullPath}//登錄成功后跳入瀏覽的當前頁面})}}return Promise.reject(error) });Vue.http = Vue.prototype.$http = instance;

簡單的分享一下自己的代碼；這是本人結合JWT-Auth定制的axios攔截，
1.根據用戶是否登陸，查看用戶請求頭是否攜帶token
2.根據判斷后臺響應值headers是否攜帶Authorization值，如果存在，刷新Token
3.如果用戶授權失敗，直接跳至登陸頁面

感謝大家有時間觀看博客，本人后端人員，純菜鳥一枚，如有什么不對的地方，請多多支出

總結

以上是生活随笔為你收集整理的vue+axios 拦截器实现统一token的全部內容，希望文章能夠幫你解決所遇到的問題。

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