refactor(auth): 关闭 refresh_token 刷新问题

src/api/common/login.js

@@ -73,9 +73,14 @@ export function logout() {
 
 
 // 刷新 token 有效期
-export function refreshToken() {
+export function refreshTokenAPI(refreshToken) {
   return request({
-    url: '/auth/refresh',
-    method: 'post'
+    url: '/auth/refreshToken',
+    method: 'post',
+    headers: {
+      isToken: false, // 本次请求无需设置在请求拦截器设置请求头上的 token（容易把过期的 token 覆盖到 Authorization 了，而这次 Authorization 我带的是刷新的 refreshToken 给后端）
+      'Authorization': `Bearer ` + refreshToken
+    },
+    
   })
 }

src/store/modules/user.js

-import { login, fsLogin, getInfo, qcLogin } from '@/api'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { login, fsLogin, getInfo, qcLogin, refreshTokenAPI } from '@/api'
+import { getToken, setToken, removeToken, getRefreshToken, setRefreshToken, removeRefreshToken } from '@/utils/auth'
+
 import { isHttp, isEmpty } from "@/utils/validate"
 import defAva from '@/assets/images/profile.jpg'
 
@@ -8,6 +9,7 @@ export default defineStore(
   {
     state: () => ({
       token: getToken(),
+      refreshToken: getRefreshToken(),
       id: '',
       name: '',
       avatar: '',
@@ -27,7 +29,9 @@ export default defineStore(
             const { username, password } = data
             login({ username, password }).then(res => {
               this.token = res.data.access_token
+              this.refreshToken = res.data.refresh_token
               setToken(res.data.access_token)
+              setRefreshToken(res.data.refresh_token)
               resolve()
             }).catch(error => {
               reject(error)
@@ -92,7 +96,13 @@ export default defineStore(
           //   reject(error)
           // })
         })
-      }
+      },
+      // 刷新token
+      async refreshTokenFn() {
+        const res = await refreshTokenAPI(this.refreshToken)
+        this.token = res.data.access_token
+        setToken(res.data.access_token)
+      },
     },
     getters: {
       /**
@@ -109,7 +119,7 @@ export default defineStore(
           empId: state.userInfo.userId, // 员工 id
           empNo: state.userInfo.userName, // 员工工号
           empName: state.userInfo.nickName, // 员工昵称名字
-        }  
+        }
       }
     }
   })

src/store/modules/version.js

@@ -14,8 +14,8 @@ export default defineStore(
       getVersion() {
         return new Promise((resolve, reject) => {
           getVersionAPI().then(res => {
-            this.versionChange = !(this.version === res.data[0].version)
-            this.version = res.data[0].version
+            this.versionChange = !(this.version === res.data[0]?.version)
+            this.version = res.data[0]?.version
             // 组织版本内容数据
             this.versionList = res.data[0]?.changes.map(o => {
               return {

src/utils/auth.js

 import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
+const refreshToken = 'admin-t'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -13,3 +14,17 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+
+export function getRefreshToken() {
+  return Cookies.get(refreshToken)
+}
+
+export function setRefreshToken(token) {
+  return Cookies.set(refreshToken, token)
+}
+
+export function removeRefreshToken() {
+  return Cookies.remove(refreshToken)
+}
+
+

src/utils/request.js

@@ -6,7 +6,7 @@ import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 import useUserStore from '@/store/modules/user'
-import { fsClientAuth, refreshToken } from '@/api'
+import { fsClientAuth } from '@/api'
 
 let downloadLoadingInstance;
 // 是否显示重新登录
@@ -81,7 +81,6 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(async res => {
-
   // 未设置状态码则默认成功状态
   const code = res.data.code || 200;
   // 获取错误信息
@@ -102,21 +101,29 @@ service.interceptors.response.use(async res => {
       return service(res.config)
     }
     // PC/移动端刷新 token 有效期
-    // await refreshToken()
+    // await useUserStore().refreshTokenFn()
     // return service(res.config)
-
-    if (!isRelogin.show) {
-      isRelogin.show = true;
-      ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-        isRelogin.show = false;
-        useUserStore().logOut().then(() => {
-          location.href = '#/login';
-        })
-      }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
+    ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+      isRelogin.show = false;
+      useUserStore().logOut().then(() => {
+        location.href = '#/login';
+      })
+    }).catch(() => {
+      isRelogin.show = false;
+    });
     return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+
+  } else if (code === 403) {
+    // 如果刷新 refreshToken 接口也报错了，证明需要重新登录
+    // ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+    //   isRelogin.show = false;
+    //   useUserStore().logOut().then(() => {
+    //     location.href = '#/login';
+    //   })
+    // }).catch(() => {
+    //   isRelogin.show = false;
+    // });
+    // return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
   } else if (code === 500) {
     ElMessage({ message: msg, type: 'error' })
     return Promise.reject(new Error(msg))

vite.config.js

@@ -39,7 +39,7 @@ export default defineConfig(({ mode, command }) => {
           rewrite: (p) => p.replace(/^\/ql_local/, '')
         },
         '/bc_local': {
-          target: 'http://192.168.100.103:8180',
+          target: 'http://192.168.100.180:8180',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/bc_local/, '')
         }