當Vue前端發起請求，攜帶者后端之前傳遞的tokenId，這個tokenId是有有效期的，當后端判定這個tokenId失效時，發出失效狀態，前端的axios的攔截器攔截到的話，就提示前端重新登陸，另外清除前端已經登陸的客戶信息。

在src目錄下添加一個目錄——service，里面新建文件——index.js，在這當中填入代碼：

//引入vuex,后面如果tokenId過期，清除vuex中保存的登陸信息 import vuex from '../store/index';service.interceptors.response.use(response => {if (response.status !== 200) {if (response.status === 500) { // 服務器斷開alert("服務器斷開，請稍后重試。");}return Promise.reject(new Error(response.message || 'Error'))} else {// 清除登陸的信息，提示用戶重新登陸！if (response.data.status == "401") {localStorage.removeItem("user");localStorage.removeItem("tokenId");// 清楚vuex中的值vuex.commit("user", null);alert(response.data.msg);}return response} }, error => {if (error.response.status === 401) { // token失效 ,重新獲取tokenalert("不允許訪問,請聯系網站！");} else if (error.response.status === 500) { // 服務器斷開alert("服務器斷開，請稍后重試。");} else if (error.response.status === 403) { //無auth授權，后臺不允許訪問alert("不允許訪問,請聯系網站");}return Promise.reject(error) })export default service;

使用的話可以看上一篇文章 ：

vue中給axios添加攔截器，自動攜帶tokenId

?

總結

以上是生活随笔為你收集整理的vue添加响应response拦截器，响应登陆超时处理的全部內容，希望文章能夠幫你解決所遇到的問題。

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