需求

要想統(tǒng)一處理所有http請求和響應(yīng)，就得用上 axios 的攔截器。通過配置 http response inteceptor ，當(dāng)后端接口返回 401 Unauthorized（未授權(quán)） ，讓用戶重新登錄。通過這個(gè)項(xiàng)目學(xué)習(xí)如何實(shí)現(xiàn)一個(gè)前端項(xiàng)目中所需要的 登錄及攔截、登出、token失效的攔截及對應(yīng) axios 攔截器的使用。
代碼如下：

const instance = axios.create({baseURL: 'http://www.laravel5.5.com/api/',timeout: 10000, });//POST傳參序列化(添加請求攔截器) // 在發(fā)送請求之前做某件事 instance.interceptors.request.use(config => { // // 設(shè)置以 form 表單的形式提交參數(shù)，如果以 JSON 的形式提交表單，可忽略if(config.method === 'post'){// JSON 轉(zhuǎn)換為 FormDataconst formData = new FormData();Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))config.data = formData}// 下面會說在什么時(shí)候存儲 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("錯(cuò)誤的傳參", 'fail')return Promise.reject(error) })// 自定義的 axios 響應(yīng)攔截器 instance.interceptors.response.use((response) => {// 判斷一下響應(yīng)中是否有 token，如果有就直接使用此 token 替換掉本地的 token。你可以根據(jù)你的業(yè)務(wù)需求自己編寫更新 token 的邏輯var token = response.headers.authorization;if (token) {// 如果 header 中存在 token，那么觸發(fā) 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}//登錄成功后跳入瀏覽的當(dāng)前頁面})}}return Promise.reject(error) });Vue.http = Vue.prototype.$http = instance;

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。