fix: fixed the failure to refresh the page when login failed (#4204)

vbenjs · Aug 20, 2024 · 2288827 · 2288827
1 parent fecf551
commit 2288827
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 21 deletions.
diff --git a/apps/backend-mock/utils/jwt-utils.ts b/apps/backend-mock/utils/jwt-utils.ts
@@ -14,7 +14,7 @@ export interface UserPayload extends UserInfo {
 }
 
 export function generateAccessToken(user: UserInfo) {
- return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '2h' });
+ return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '1d' });
 }
 
 export function generateRefreshToken(user: UserInfo) {

diff --git a/apps/web-antd/src/api/request.ts b/apps/web-antd/src/api/request.ts
@@ -31,7 +31,10 @@ function createRequestClient(baseURL: string) {
  const accessStore = useAccessStore();
  const authStore = useAuthStore();
  accessStore.setAccessToken(null);
- if (preferences.app.loginExpiredMode === 'modal') {
+ if (
+ preferences.app.loginExpiredMode === 'modal' &&
+ accessStore.isAccessChecked
+ ) {
  accessStore.setLoginExpired(true);
  } else {
  await authStore.logout();

diff --git a/apps/web-antd/src/router/guard.ts b/apps/web-antd/src/router/guard.ts
@@ -92,10 +92,8 @@ function setupAccessGuard(router: Router) {
  return to;
  }
 
- const accessRoutes = accessStore.accessRoutes;
-
  // 是否已经生成过动态路由
- if (accessRoutes && accessRoutes.length > 0) {
+ if (accessStore.isAccessChecked) {
  return true;
  }
 
@@ -115,6 +113,7 @@ function setupAccessGuard(router: Router) {
  // 保存菜单信息和路由信息
  accessStore.setAccessMenus(accessibleMenus);
  accessStore.setAccessRoutes(accessibleRoutes);
+ accessStore.setIsAccessChecked(true);
  const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
  return {

diff --git a/apps/web-ele/src/api/request.ts b/apps/web-ele/src/api/request.ts
@@ -31,7 +31,10 @@ function createRequestClient(baseURL: string) {
  const accessStore = useAccessStore();
  const authStore = useAuthStore();
  accessStore.setAccessToken(null);
- if (preferences.app.loginExpiredMode === 'modal') {
+ if (
+ preferences.app.loginExpiredMode === 'modal' &&
+ accessStore.isAccessChecked
+ ) {
  accessStore.setLoginExpired(true);
  } else {
  await authStore.logout();

diff --git a/apps/web-ele/src/router/guard.ts b/apps/web-ele/src/router/guard.ts
@@ -92,10 +92,8 @@ function setupAccessGuard(router: Router) {
  return to;
  }
 
- const accessRoutes = accessStore.accessRoutes;
-
  // 是否已经生成过动态路由
- if (accessRoutes && accessRoutes.length > 0) {
+ if (accessStore.isAccessChecked) {
  return true;
  }
 
@@ -115,6 +113,7 @@ function setupAccessGuard(router: Router) {
  // 保存菜单信息和路由信息
  accessStore.setAccessMenus(accessibleMenus);
  accessStore.setAccessRoutes(accessibleRoutes);
+ accessStore.setIsAccessChecked(true);
  const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
  return {

diff --git a/apps/web-naive/src/api/request.ts b/apps/web-naive/src/api/request.ts
@@ -30,7 +30,10 @@ function createRequestClient(baseURL: string) {
  const accessStore = useAccessStore();
  const authStore = useAuthStore();
  accessStore.setAccessToken(null);
- if (preferences.app.loginExpiredMode === 'modal') {
+ if (
+ preferences.app.loginExpiredMode === 'modal' &&
+ accessStore.isAccessChecked
+ ) {
  accessStore.setLoginExpired(true);
  } else {
  await authStore.logout();

diff --git a/apps/web-naive/src/router/guard.ts b/apps/web-naive/src/router/guard.ts
@@ -92,13 +92,10 @@ function setupAccessGuard(router: Router) {
  return to;
  }
 
- const accessRoutes = accessStore.accessRoutes;
-
  // 是否已经生成过动态路由
- if (accessRoutes && accessRoutes.length > 0) {
+ if (accessStore.isAccessChecked) {
  return true;
  }
-
  // 生成路由表
  // 当前登录用户拥有的角色标识列表
  const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
@@ -115,6 +112,7 @@ function setupAccessGuard(router: Router) {
  // 保存菜单信息和路由信息
  accessStore.setAccessMenus(accessibleMenus);
  accessStore.setAccessRoutes(accessibleRoutes);
+ accessStore.setIsAccessChecked(true);
  const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
  return {

diff --git a/docs/src/guide/essentials/server.md b/docs/src/guide/essentials/server.md
@@ -193,7 +193,10 @@ function createRequestClient(baseURL: string) {
  const accessStore = useAccessStore();
  const authStore = useAuthStore();
  accessStore.setAccessToken(null);
- if (preferences.app.loginExpiredMode === 'modal') {
+ if (
+ preferences.app.loginExpiredMode === 'modal' &&
+ accessStore.isAccessChecked
+ ) {
  accessStore.setLoginExpired(true);
  } else {
  await authStore.logout();

diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
@@ -18,7 +18,7 @@ const defaultPreferences: Preferences = {
  isMobile: false,
  layout: 'sidebar-nav',
  locale: 'zh-CN',
- loginExpiredMode: 'modal',
+ loginExpiredMode: 'page',
  name: 'Vben Admin',
  preferencesButtonPosition: 'fixed',
  watermark: false,

diff --git a/packages/stores/src/modules/access.ts b/packages/stores/src/modules/access.ts
@@ -22,6 +22,10 @@ interface AccessState {
  * 登录 accessToken
  */
  accessToken: AccessToken;
+ /**
+ * 是否已经检查过权限
+ */
+ isAccessChecked: boolean;
  /**
  * 登录是否过期
  */
@@ -49,6 +53,9 @@ export const useAccessStore = defineStore('core-access', {
  setAccessToken(token: AccessToken) {
  this.accessToken = token;
  },
+ setIsAccessChecked(isAccessChecked: boolean) {
+ this.isAccessChecked = isAccessChecked;
+ },
  setLoginExpired(loginExpired: boolean) {
  this.loginExpired = loginExpired;
  },
@@ -65,6 +72,7 @@ export const useAccessStore = defineStore('core-access', {
  accessMenus: [],
  accessRoutes: [],
  accessToken: null,
+ isAccessChecked: false,
  loginExpired: false,
  refreshToken: null,
  }),

diff --git a/playground/src/api/request.ts b/playground/src/api/request.ts
@@ -31,7 +31,10 @@ function createRequestClient(baseURL: string) {
  const accessStore = useAccessStore();
  const authStore = useAuthStore();
  accessStore.setAccessToken(null);
- if (preferences.app.loginExpiredMode === 'modal') {
+ if (
+ preferences.app.loginExpiredMode === 'modal' &&
+ accessStore.isAccessChecked
+ ) {
  accessStore.setLoginExpired(true);
  } else {
  await authStore.logout();

diff --git a/playground/src/router/guard.ts b/playground/src/router/guard.ts
@@ -61,7 +61,6 @@ function setupAccessGuard(router: Router) {
  const accessStore = useAccessStore();
  const userStore = useUserStore();
  const authStore = useAuthStore();
-
  // 基本路由，这些路由不需要进入权限拦截
  if (coreRouteNames.includes(to.name as string)) {
  if (to.path === LOGIN_PATH && accessStore.accessToken) {
@@ -92,10 +91,8 @@ function setupAccessGuard(router: Router) {
  return to;
  }
 
- const accessRoutes = accessStore.accessRoutes;
-
  // 是否已经生成过动态路由
- if (accessRoutes && accessRoutes.length > 0) {
+ if (accessStore.isAccessChecked) {
  return true;
  }
 
@@ -115,6 +112,7 @@ function setupAccessGuard(router: Router) {
  // 保存菜单信息和路由信息
  accessStore.setAccessMenus(accessibleMenus);
  accessStore.setAccessRoutes(accessibleRoutes);
+ accessStore.setIsAccessChecked(true);
  const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
  return {