处理无感刷新token

src/api/request.js

@@ -13,7 +13,8 @@ import { getCurrentInstance } from 'vue'
 import CryptoJS from 'crypto-js'
 import axios from 'axios'
 import { Toast } from 'vant'
-import * as api from '@/api/api.js'
+import { refreshToken, isRefreshRequest } from '@/util/refresh.js'
+
 // 实例化axios
 const request = axios.create({
   baseURL: process.env.VUE_APP_HOST,
@@ -80,40 +81,27 @@ request.interceptors.response.use(
     }
   },
   async (error) => {
-    if (error.response && error.response.status === 401) {
-      // if (!isRefreshing) {
-      //   const loginFrom = {
-      //     LoginId: '镇领导',
-      //     Password: '123456',
-      //   }
-      //   let userData = await api.login(loginFrom)
-      //   localStorage.setItem('mudu_token', userData.access_token)
-      //   localStorage.setItem('mudu_type', userData.type) // 区分跳转路由
-      //   localStorage.setItem('mudu_userInfo', JSON.stringify(userData))
-      //   localStorage.setItem('mudu_username', userData.profile.userName)
-      //   localStorage.setItem('mudu_userId', userData.profile.userId)
-      //   localStorage.setItem('mudu_logpwd', JSON.stringify(loginFrom))
-      //   let ress = await request.request(error.response.config)
-      //   return ress
-      // }
-
-      Toast({
-        message: '登录过期，请重新登录',
-        position: 'bottom',
-      })
-      localStorage.removeItem('HISTORY_ACTIVE')
-      localStorage.removeItem('mudu_token')
-      localStorage.removeItem('mudu_username')
-      localStorage.removeItem('mudu_userInfo')
-      localStorage.removeItem('mudu_userId')
-      localStorage.removeItem('mudu_type')
-      router.replace('/')
+    let errorData = error.response
+    if (errorData.status === 401 && !isRefreshRequest(errorData.config)) {
+      const isSucceed = await refreshToken()
+      if (isSucceed) {
+        //重新请求
+        console.log('重新刷新')
+        errorData.config.headers.Authorization =
+          'Bearer ' + localStorage.getItem('mudu_token') //替换token
+        let result = await request.request(errorData.config) //重新请求
+        return result
+      } else {
+        Toast({
+          message: '刷新令牌失败',
+          position: 'bottom',
+        })
+      }
     } else {
       Toast({
         message: '网络异常，请检查网络情况',
         position: 'bottom',
       })
-      // router.replace('/')
     }
     return Promise.reject(error)
   }

src/util/refresh.js

@@ -0,0 +1,25 @@
+import * as api from '@/api/api.js'
+let promise
+
+export async function refreshToken() {
+  if (promise) {
+    return promise
+  }
+  promise = new Promise(async (resolve) => {
+    const loginFrom = {
+      LoginId: '镇领导',
+      Password: '123456',
+    }
+    let res = await api.login(loginFrom, { __isRefreshToken: true })
+    localStorage.setItem('mudu_token', res.access_token) //存token
+    resolve(res.code === 200)
+  })
+  promise.finally(() => {
+    promise = null
+  })
+  return promise
+}
+
+export function isRefreshRequest(config) {
+  return !!config.__isRefreshToken //两个取反，变成boolean
+}