From 1f798663ba7380e504847208ab52d51f28d837ab Mon Sep 17 00:00:00 2001 From: dlaren Date: Sat, 30 Aug 2025 20:28:33 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91=201?= =?UTF-8?q?=E3=80=81=E5=BC=BA=E5=88=B6=E7=99=BB=E5=87=BA=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9B2=E3=80=81=E7=B3=BB=E7=BB=9Ftoken?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/axios/service.ts | 85 ++++++++++++------------ src/views/Login/components/LoginForm.vue | 61 +++++++---------- 2 files changed, 68 insertions(+), 78 deletions(-) diff --git a/src/config/axios/service.ts b/src/config/axios/service.ts index 7c31e0b..8748727 100644 --- a/src/config/axios/service.ts +++ b/src/config/axios/service.ts @@ -21,9 +21,9 @@ const ignoreMsgs = [ export const isRelogin = { show: false } // Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现 // 请求队列 -let requestList: any[] = [] +const requestList: any[] = [] // 是否正在刷新中 -let isRefreshToken = false +const isRefreshToken = false // 请求白名单，无须token的接口 const whiteList: string[] = ['/login', '/refresh-token'] @@ -109,45 +109,48 @@ service.interceptors.response.use( // 如果是忽略的错误码，直接返回 msg 异常 return Promise.reject(msg) } else if (code === 401) { - // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了 - if (!isRefreshToken) { - isRefreshToken = true - // 1. 如果获取不到刷新令牌，则只能执行登出操作 - if (!getRefreshToken()) { - return handleAuthorized() - } - // 2. 进行刷新访问令牌 - try { - const refreshTokenRes = await refreshToken() - // 2.1 刷新成功，则回放队列的请求 + 当前请求 - setToken((await refreshTokenRes).data.data) - config.headers!.Authorization = 'Bearer ' + getAccessToken() - requestList.forEach((cb: any) => { - cb() - }) - requestList = [] - return service(config) - } catch (e) { - // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。 - // 2.2 刷新失败，只回放队列的请求 - requestList.forEach((cb: any) => { - cb() - }) - // 提示是否要登出。即不回放当前请求！不然会形成递归 - return handleAuthorized() - } finally { - requestList = [] - isRefreshToken = false - } - } else { - // 添加到队列，等待刷新获取到新的令牌 - return new Promise((resolve) => { - requestList.push(() => { - config.headers!.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改 - resolve(service(config)) - }) - }) - } + // 如果未进行认证，返回登录页面（切换浏览器等均会触发） + console.log(msg) + return handleAuthorized() + // // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了 + // if (!isRefreshToken) { + // isRefreshToken = true + // // 1. 如果获取不到刷新令牌，则只能执行登出操作 + // if (!getRefreshToken()) { + // return handleAuthorized() + // } + // // 2. 进行刷新访问令牌 + // try { + // const refreshTokenRes = await refreshToken() + // // 2.1 刷新成功，则回放队列的请求 + 当前请求 + // setToken((await refreshTokenRes).data.data) + // config.headers!.Authorization = 'Bearer ' + getAccessToken() + // requestList.forEach((cb: any) => { + // cb() + // }) + // requestList = [] + // return service(config) + // } catch (e) { + // // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。 + // // 2.2 刷新失败，只回放队列的请求 + // requestList.forEach((cb: any) => { + // cb() + // }) + // // 提示是否要登出。即不回放当前请求！不然会形成递归 + // return handleAuthorized() + // } finally { + // requestList = [] + // isRefreshToken = false + // } + // } else { + // // 添加到队列，等待刷新获取到新的令牌 + // return new Promise((resolve) => { + // requestList.push(() => { + // config.headers!.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改 + // resolve(service(config)) + // }) + // }) + // } } else if (code === 500) { ElMessage.error(t('sys.api.errMsg500')) return Promise.reject(new Error(msg)) diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue index 4af1aa1..e2a316e 100644 --- a/src/views/Login/components/LoginForm.vue +++ b/src/views/Login/components/LoginForm.vue @@ -81,6 +81,29 @@ /> + + + + + + + + + + --> - - 是否使用管理员密码强制退出该用户 - - - - 管理员密码： - - -