修复 refresh token 过期时，不会自动跳转到首页的问题

YunaiV
1 parent c738b2c8
Showing 1 changed file with 79 additions and 72 deletions
yudao-ui-admin/src/utils/request.js
 import axios from 'axios'
-import { Notification, MessageBox, Message } from 'element-ui'
+import {Message, MessageBox, Notification} from 'element-ui'
 import store from '@/store'
 import {getAccessToken, getRefreshToken, setToken} from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
@@ -7,6 +7,12 @@ import Cookies from &quot;js-cookie&quot;;
 import {getPath, getTenantEnable} from "@/utils/ruoyi";
 import {refreshToken} from "@/api/login";
+// 需要忽略的提示。忽略后，自动 Promise.reject('error')
+const ignoreMsgs = [
+  "无效的刷新令牌", // 刷新令牌被删除时，不用提示
+  "刷新令牌已过期" // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
+]
+
 // 是否显示重新登录
 export let isRelogin = { show: false };
 // Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
@@ -15,6 +21,7 @@ let requestList = []
 // 是否正在刷新中
 let isRefreshToken = false
+
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
@@ -66,85 +73,85 @@ service.interceptors.request.use(config =&gt; {
 })
 // 响应拦截器
-service.interceptors.response.use( async res => {
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
-    // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
-    if (code === 401) {
-      // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
-      if (!isRefreshToken) {
-        isRefreshToken = true;
-        // 1. 如果获取不到刷新令牌，则只能执行登出操作
-        if (!getRefreshToken()) {
-          return handleAuthorized();
-        }
-        // 2. 进行刷新访问令牌
-        try {
-          const refreshTokenRes = await refreshToken()
-          // 2.1 刷新成功，则回放队列的请求 + 当前请求
-          setToken(refreshTokenRes.data)
-          requestList.forEach(cb => cb())
-          return service(res.config)
-        } catch (e) {// 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
-          // 2.2 刷新失败，只回放队列的请求
-          requestList.forEach(cb => cb())
-          // 提示是否要登出。即不回放当前请求！不然会形成递归
-          return handleAuthorized();
-        } finally {
-          requestList = []
-          isRefreshToken = false
-        }
-      } else {
-        // 添加到队列，等待刷新获取到新的令牌
-        return new Promise(resolve => {
-          requestList.push(() => {
-            res.config.headers['Authorization'] = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-            resolve(service(res.config))
-          })
-        })
+service.interceptors.response.use(async res => {
+  // 未设置状态码则默认成功状态
+  const code = res.data.code || 200;
+  // 获取错误信息
+  const msg = res.data.msg || errorCode[code] || errorCode['default']
+  if (ignoreMsgs.indexOf(msg) !== -1) { // 如果是忽略的错误码，直接返回 msg 异常
+    console.log('132312311');
+    return Promise.reject(msg)
+  } else if (code === 401) {
+    // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
+    if (!isRefreshToken) {
+      isRefreshToken = true;
+      // 1. 如果获取不到刷新令牌，则只能执行登出操作
+      if (!getRefreshToken()) {
+        return handleAuthorized();
       }
-    } else if (code === 500) {
-      Message({
-        message: msg,
-        type: 'error'
-      })
-      return Promise.reject(new Error(msg))
-    } else if (code === 901) {
-      Message({
-        type: 'error',
-        duration: 0,
-        dangerouslyUseHTMLString: true,
-        message: '<div>演示模式，无法进行写操作</div>'
-          + '<div> &nbsp; </div>'
-          + '<div>参考 https://doc.iocoder.cn/ 教程</div>'
-          + '<div> &nbsp; </div>'
-          + '<div>5 分钟搭建本地环境</div>',
-      })
-      return Promise.reject(new Error(msg))
-    } else if (code !== 200) {
-      if (msg === '无效的刷新令牌') { // hard coding：忽略这个提示，直接登出
-        console.log('无效的刷新令牌')
-      } else {
-        Notification.error({
-          title: msg
-        })
+      // 2. 进行刷新访问令牌
+      try {
+        const refreshTokenRes = await refreshToken()
+        // 2.1 刷新成功，则回放队列的请求 + 当前请求
+        setToken(refreshTokenRes.data)
+        requestList.forEach(cb => cb())
+        return service(res.config)
+      } catch (e) {// 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
+        // 2.2 刷新失败，只回放队列的请求
+        requestList.forEach(cb => cb())
+        // 提示是否要登出。即不回放当前请求！不然会形成递归
+        return handleAuthorized();
+      } finally {
+        requestList = []
+        isRefreshToken = false
       }
-      return Promise.reject('error')
     } else {
-      return res.data
+      // 添加到队列，等待刷新获取到新的令牌
+      return new Promise(resolve => {
+        requestList.push(() => {
+          res.config.headers['Authorization'] = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+          resolve(service(res.config))
+        })
+      })
+    }
+  } else if (code === 500) {
+    Message({
+      message: msg,
+      type: 'error'
+    })
+    return Promise.reject(new Error(msg))
+  } else if (code === 901) {
+    Message({
+      type: 'error',
+      duration: 0,
+      dangerouslyUseHTMLString: true,
+      message: '<div>演示模式，无法进行写操作</div>'
+        + '<div> &nbsp; </div>'
+        + '<div>参考 https://doc.iocoder.cn/ 教程</div>'
+        + '<div> &nbsp; </div>'
+        + '<div>5 分钟搭建本地环境</div>',
+    })
+    return Promise.reject(new Error(msg))
+  } else if (code !== 200) {
+    if (msg === '无效的刷新令牌') { // hard coding：忽略这个提示，直接登出
+      console.log(msg)
+    } else {
+      Notification.error({
+        title: msg
+      })
     }
-  },
-  error => {
+    return Promise.reject('error')
+  } else {
+    return res.data
+  }
+}, error => {
     console.log('err' + error)
-    let { message } = error;
+    let {message} = error;
     if (message === "Network Error") {
       message = "后端接口连接异常";
-    }
-    else if (message.includes("timeout")) {
+    } else if (message.includes("timeout")) {
       message = "系统接口请求超时";
-    }
-    else if (message.includes("Request failed with status code")) {
+    } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
     Message({