feat:新增前端token无感刷新功能

fix:前端权限码太多时，cookie太大请求异常问题。改为localstage存储token

Signed-off-by: daxiongok <571115139@qq.com>

Yi.RuoYi.Vue3/src/utils/auth.js

@@ -1,18 +1,38 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
+const RefreshTokenKey = 'Refresh-Token'
 const TenantIdKey='Tenant-Id'
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return localStorage.getItem(TokenKey)
+  // return Cookies.get(TokenKey)
 }
 
 export function setToken(token) {
-  return Cookies.set(TokenKey, token)
+  return localStorage.setItem(TokenKey, token)
+  // return Cookies.set(TokenKey, token)
 }
 
 export function removeToken() {
-  return Cookies.remove(TokenKey)
+  return localStorage.removeItem(TokenKey)
+  // return Cookies.remove(TokenKey)
 }
+
+export function getRefreshToken() {
+  return localStorage.getItem(RefreshTokenKey)
+  // return Cookies.get(RefreshTokenKey)
+}
+
+export function setRefreshToken(token) {
+  return localStorage.setItem(RefreshTokenKey, token)
+  // return Cookies.set(RefreshTokenKey, token)
+}
+
+export function removeRefreshToken() {
+  return localStorage.removeItem(RefreshTokenKey)
+  // return Cookies.remove(RefreshTokenKey)
+}
+
 export function getTenantId() {
   return Cookies.get(TenantIdKey)
 }

Yi.RuoYi.Vue3/src/utils/refreshToken.js

@@ -0,0 +1,19 @@
+import { getRefreshToken } from './auth'
+import request from './request'
+
+export function refreshToken() {
+  return request({
+    url: '/account/refresh',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json;charset=utf-8',
+      'Authorization': 'Bearer ' + getRefreshToken(),
+      'isToken' :false
+    },
+    __isRefreshToken: true
+  })
+}
+
+export function isRefreshRequest(config) {
+	return !!config.__isRefreshToken
+}

Yi.RuoYi.Vue3/src/utils/request.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'
 import { getToken,getTenantId } from '@/utils/auth'
+import { refreshToken, isRefreshRequest } from './refreshToken.js'
 import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
@@ -126,16 +127,69 @@ service.interceptors.response.use(res => {
 
   // handler(code, msg);
   return Promise.resolve(res);
-},
+}, async function(error) {
-  error => {
+  console.log(error.response, "error")
+  const errorRes = error.response;
+  console.log('isRefreshingbefore',isRefreshing)
 
-    console.log(error.response,"error")
+  if (errorRes?.status == '401' && !isRefreshRequest(errorRes.config)){ // 如果没有权限且不是刷新token的请求
-    const errorRes=error.response;
+    console.log('isRefreshing',isRefreshing,new Date())
-    const code = errorRes.status || 200;
+      if (!isRefreshing) {
-    const msg = `${errorRes.data?.error?.message}` ;
+          isRefreshing = true
+          let newToken = ''
+          // 刷新token
+          try {
+              const res = await refreshToken()
+              // 保存新的token
+              newToken = res.data.token
+              setToken(newToken)
+              setRefreshToken(res.data.refreshToken)
+             
+          } catch(e) {
+            console.log("触发重新登录",e)
+            ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+              .then(() => {
+                isRelogin.show = false;
+                useUserStore().logOut().then(() => {
+                  location.href = '/index';
+                })
+              }).catch(() => {
+                isRelogin.show = false;
+              });
+              return Promise.reject(error)
+          }
+          // 有新token后再重新请求
+          errorRes.config.headers['Authorization'] = 'Bearer ' + newToken // 新token
+          // token 刷新后将数组的方法重新执行
+          waitRequests.forEach((cb) => cb(newToken))
+          waitRequests = [] // 重新请求完清空
+          const resp = await service.request(errorRes.config)
+          isRefreshing = false
+          console.log('closseRefreshing',isRefreshing)
+          return Promise.resolve(resp);
+      } else {
+          // 返回未执行 resolve 的 Promise
+          return new Promise(resolve => {
+              // 用函数形式将 resolve 存入，等待刷新后再执行
+              waitRequests.push(token => {
+                  errorRes.config.headers['Authorization'] = 'Bearer ' + `${token}`
+                  resolve(service(errorRes.config))
+              })
+          })
+      }
+  }
+  else
+  {
+    const code = errorRes && errorRes.status || 200;
+    const msg = `${errorRes?.data?.error?.message}`;
     handler(code, msg);
     return Promise.reject(error)
   }
+}
 )
 
 // 通用下载方法
@@ -180,22 +234,22 @@ const handler = (code, msg) => {
           title: msg
         })
         break;
-    //未授权
+    // //未授权
-    case 401:
+    // case 401:
-      ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+    //   ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-        confirmButtonText: '重新登录',
+    //     confirmButtonText: '重新登录',
-        cancelButtonText: '取消',
+    //     cancelButtonText: '取消',
-        type: 'warning'
+    //     type: 'warning'
-      })
+    //   })
-        .then(() => {
+    //     .then(() => {
-          isRelogin.show = false;
+    //       isRelogin.show = false;
-          useUserStore().logOut().then(() => {
+    //       useUserStore().logOut().then(() => {
-            location.href = '/index';
+    //         location.href = '/index';
-          })
+    //       })
-        }).catch(() => {
+    //     }).catch(() => {
-          isRelogin.show = false;
+    //       isRelogin.show = false;
-        });
+    //     });
-      break;
+    //   break;
     case 404:
       ElMessage({
         message: "404未找到资源",