fix(frontend): eliminate boot race between role restore and route guard

Root cause (pre-existing): user state initialized with default role
'developer' while JWT role restoration happened via render-phase setState
~1 render later; first guard pass evaluated tickets/workflow against the
developer writable-datasource gate and bounced admins to dashboard on
direct load.

Fix: initialize user state lazily from the JWT in one pass
(restoreUserFromToken) - first render already carries the correct role.
Verified in browser: direct loads of /tickets and /workflow stay put;
URL query state survives refresh; expired session redirects to
/login?redirect=<path> and login returns to the original page.

frontend/src/hooks/useAuth.tsx

@@ -18,12 +18,24 @@ export type { UserRole };
 
 /** 细粒度权限类型 */
 export type PermissionAction =
-  | 'ticket.create' | 'ticket.approve' | 'ticket.execute' | 'ticket.rollback' | 'ticket.delete'
+  | 'ticket.create'
-  | 'query.create' | 'query.export'
+  | 'ticket.approve'
-  | 'instance.add' | 'instance.edit' | 'instance.delete'
+  | 'ticket.execute'
-  | 'user.manage' | 'role.manage' | 'rule.manage'
+  | 'ticket.rollback'
-  | 'workflow.manage' | 'config.manage'
+  | 'ticket.delete'
-  | 'announcement.manage' | 'auto-task.manage' | 'instance-group.manage';
+  | 'query.create'
+  | 'query.export'
+  | 'instance.add'
+  | 'instance.edit'
+  | 'instance.delete'
+  | 'user.manage'
+  | 'role.manage'
+  | 'rule.manage'
+  | 'workflow.manage'
+  | 'config.manage'
+  | 'announcement.manage'
+  | 'auto-task.manage'
+  | 'instance-group.manage';
 
 /** 数据源级权限 */
 export interface DataSourcePermission {
@@ -75,14 +87,14 @@ interface AuthContextType {
     instanceId: number,
     action: 'read' | 'write' | 'delete' | 'export',
     database?: string,
-    table?: string
+    table?: string,
   ) => boolean;
   /** 批量检查数据源权限 */
   checkDataSourcePermissions: (
     instanceId: number,
     actions: ('read' | 'write' | 'delete' | 'export')[],
     database?: string,
-    table?: string
+    table?: string,
   ) => Record<string, boolean>;
   /** 刷新用户权限 */
   refreshPermissions: () => Promise<void>;
@@ -140,8 +152,29 @@ const CACHE_TTL = 5 * 60 * 1000; // 5分钟
 
 const AuthContext = createContext<AuthContextType | null>(null);
 
+/** 从 JWT 惰性恢复基本用户信息（页面刷新时的首帧即有正确角色，杜绝守卫竞态） */
+function restoreUserFromToken(base: AuthUser): AuthUser {
+  const token = readStorage('token');
+  if (!token) return base;
+  try {
+    const payload = JSON.parse(atob(token.split('.')[1]));
+    const role = payload.role as UserRole;
+    if (!role) return base;
+    return {
+      ...base,
+      id: Number(payload.sub) || 0,
+      role,
+      roleName: roleNameMap[role] || role,
+      avatar: role.charAt(0).toUpperCase(),
+    };
+  } catch {
+    return base;
+  }
+}
+
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = useState<AuthUser>({
+  const [user, setUser] = useState<AuthUser>(() =>
+    restoreUserFromToken({
       id: defaultUser.id,
       username: defaultUser.username,
       email: defaultUser.email,
@@ -151,27 +184,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       groupIds: [],
       dataSourcePermissions: [],
       customPermissions: {},
-  });
+    }),
+  );
 
-  // 从 token 恢复基本用户信息（页面刷新时）
+  const [isLoggedIn, setIsLoggedIn] = useState(() => readStorage('token') !== null);
-  const [isLoggedIn, setIsLoggedIn] = useState(() => {
-    const token = readStorage('token');
-    if (!token) return false;
-    try {
-      const payload = JSON.parse(atob(token.split('.')[1]));
-      const role = payload.role as UserRole;
-      if (role) {
-        setUser(u => ({
-          ...u,
-          id: Number(payload.sub) || 0,
-          role,
-          roleName: roleNameMap[role] || role,
-          avatar: role.charAt(0).toUpperCase(),
-        }));
-      }
-    } catch { /* ignore */ }
-    return true;
-  });
   const [hasWritableDataSourceAccess, setHasWritableDataSourceAccess] = useState(false);
 
   /** 权限缓存引用 */
@@ -199,14 +215,16 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   const hasWritableAccessInUserPayload = useCallback((u: AuthUser): boolean => {
-    return Boolean(u.dataSourcePermissions?.some(ds =>
+    return Boolean(
-      ds.actions.some(action => ['write', 'delete', 'readwrite'].includes(String(action)))
+      u.dataSourcePermissions?.some((ds) =>
-    ));
+        ds.actions.some((action) => ['write', 'delete', 'readwrite'].includes(String(action))),
+      ),
+    );
   }, []);
 
   /** 触发权限变更事件 */
   const emitPermissionChange = useCallback((updatedUser: AuthUser) => {
-    listenersRef.current.forEach(listener => listener(updatedUser));
+    listenersRef.current.forEach((listener) => listener(updatedUser));
     // 触发自定义事件，供其他组件监听
     if (typeof window !== 'undefined') {
       window.dispatchEvent(new CustomEvent(PERMISSION_CHANGE_EVENT, { detail: updatedUser }));
@@ -247,7 +265,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     }
 
     let cancelled = false;
-    instanceApi.accessible('write')
+    instanceApi
+      .accessible('write')
       .then((instances) => {
         if (cancelled) return;
         setHasWritableDataSourceAccess((instances || []).length > 0);
@@ -264,7 +283,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     };
   }, [isLoggedIn, user.id, user.role, user.permissionsUpdatedAt, hasWritableAccessInUserPayload, clearPermissionCache]);
 
-  const login = useCallback(async (username: string, password: string): Promise<boolean> => {
+  const login = useCallback(
+    async (username: string, password: string): Promise<boolean> => {
       try {
         const res = await authApi.login(username, password);
         writeStorage('token', res.access_token);
@@ -279,9 +299,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         const dataSourcePermissions: DataSourcePermission[] = u.data_source_permissions
           ? JSON.parse(u.data_source_permissions)
           : [];
-      const customPermissions: Record<string, boolean> = u.custom_permissions
+        const customPermissions: Record<string, boolean> = u.custom_permissions ? JSON.parse(u.custom_permissions) : {};
-        ? JSON.parse(u.custom_permissions)
-        : {};
 
         const newUser: AuthUser = {
           id: u.id,
@@ -304,7 +322,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       } catch {
         return false;
       }
-  }, [clearPermissionCache, emitPermissionChange]);
+    },
+    [clearPermissionCache, emitPermissionChange],
+  );
 
   const logout = useCallback(() => {
     // 先取 token 再清理：服务端撤销 refresh token 需要它
@@ -312,7 +332,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     removeStorage('token');
     removeStorage('refreshToken');
     if (token) {
-      authApi.logout(token).catch(() => { /* 服务端撤销失败不阻塞本地登出 */ });
+      authApi.logout(token).catch(() => {
+        /* 服务端撤销失败不阻塞本地登出 */
+      });
     }
     setIsLoggedIn(false);
     clearPermissionCache();
@@ -330,13 +352,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     emitPermissionChange({} as AuthUser);
   }, [clearPermissionCache, emitPermissionChange]);
 
-  const switchRole = useCallback((role: UserRole) => {
+  const switchRole = useCallback(
-    setUser(prev => {
+    (role: UserRole) => {
+      setUser((prev) => {
         const newUser: AuthUser = {
           ...prev,
           role,
           roleName: roleNameMap[role],
-        username: role === 'admin' ? 'admin' : role === 'dba' ? 'zhangsan' : role === 'developer' ? 'wangwu' : 'visitor',
+          username:
+            role === 'admin' ? 'admin' : role === 'dba' ? 'zhangsan' : role === 'developer' ? 'wangwu' : 'visitor',
           email: `${role}@company.com`,
           avatar: role.charAt(0).toUpperCase(),
         };
@@ -344,10 +368,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         emitPermissionChange(newUser);
         return newUser;
       });
-  }, [clearPermissionCache, emitPermissionChange]);
+    },
+    [clearPermissionCache, emitPermissionChange],
+  );
 
   /** 菜单权限检查（带缓存） */
-  const hasPermission = useCallback((menuId: string): boolean => {
+  const hasPermission = useCallback(
+    (menuId: string): boolean => {
       if (!isLoggedIn) return false;
 
       const cache = permissionCacheRef.current;
@@ -363,10 +390,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       cache.menu.set(menuId, result);
       cache.timestamp = Date.now();
       return result;
-  }, [user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid]);
+    },
+    [user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid],
+  );
 
   /** 操作权限检查（带缓存，支持自定义权限覆盖） */
-  const hasActionPermission = useCallback((action: PermissionAction | string): boolean => {
+  const hasActionPermission = useCallback(
+    (action: PermissionAction | string): boolean => {
       if (!isLoggedIn) return false;
 
       const cache = permissionCacheRef.current;
@@ -374,22 +404,29 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         return cache.action.get(action)!;
       }
 
-    const result = canPerformAction(action, {
+      const result = canPerformAction(
+        action,
+        {
           role: user.role,
           customPermissions: user.customPermissions,
           hasWritableDataSourceAccess,
-    }, actionPermissionMap);
+        },
+        actionPermissionMap,
+      );
       cache.action.set(action, result);
       cache.timestamp = Date.now();
       return result;
-  }, [user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid]);
+    },
+    [user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid],
+  );
 
   /** 数据源级权限检查 */
-  const hasDataSourcePermission = useCallback((
+  const hasDataSourcePermission = useCallback(
+    (
       instanceId: number,
       action: 'read' | 'write' | 'delete' | 'export',
       database?: string,
-    table?: string
+      table?: string,
     ): boolean => {
       if (!isLoggedIn) return false;
       if (user.role === 'admin') return true; // 管理员拥有所有数据源权限
@@ -425,21 +462,26 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       cache.dataSource.set(cacheKey, hasPerm);
       cache.timestamp = Date.now();
       return hasPerm;
-  }, [user.dataSourcePermissions, user.role, isLoggedIn, isCacheValid]);
+    },
+    [user.dataSourcePermissions, user.role, isLoggedIn, isCacheValid],
+  );
 
   /** 批量检查数据源权限 */
-  const checkDataSourcePermissions = useCallback((
+  const checkDataSourcePermissions = useCallback(
+    (
       instanceId: number,
       actions: ('read' | 'write' | 'delete' | 'export')[],
       database?: string,
-    table?: string
+      table?: string,
     ): Record<string, boolean> => {
       const result: Record<string, boolean> = {};
       for (const action of actions) {
         result[action] = hasDataSourcePermission(instanceId, action, database, table);
       }
       return result;
-  }, [hasDataSourcePermission]);
+    },
+    [hasDataSourcePermission],
+  );
 
   /** 从服务器刷新用户权限 */
   const refreshPermissions = useCallback(async (): Promise<void> => {
@@ -449,9 +491,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       const dataSourcePermissions: DataSourcePermission[] = u.data_source_permissions
         ? JSON.parse(u.data_source_permissions)
         : [];
-      const customPermissions: Record<string, boolean> = u.custom_permissions
+      const customPermissions: Record<string, boolean> = u.custom_permissions ? JSON.parse(u.custom_permissions) : {};
-        ? JSON.parse(u.custom_permissions)
-        : {};
 
       const newUser: AuthUser = {
         ...user,
@@ -475,15 +515,19 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }, [user, clearPermissionCache, emitPermissionChange]);
 
   const visibleMenuItems = useMemo(() => {
-    return menuItems.filter(item => item.roles.includes(user.role) && hasPermission(item.id));
+    return menuItems.filter((item) => item.roles.includes(user.role) && hasPermission(item.id));
   }, [user.role, hasPermission]);
 
   /** 检查是否拥有指定角色或以上级别权限 */
-  const hasRoleLevel = useCallback((minRole: UserRole): boolean => {
+  const hasRoleLevel = useCallback(
+    (minRole: UserRole): boolean => {
       return roleWeightMap[user.role] >= roleWeightMap[minRole];
-  }, [user.role]);
+    },
+    [user.role],
+  );
 
-  const value = useMemo(() => ({
+  const value = useMemo(
+    () => ({
       user,
       isLoggedIn,
       login,
@@ -501,9 +545,23 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       isDeveloper: user.role === 'developer',
       isGuest: user.role === 'auditor',
       hasRoleLevel,
-  }), [user, isLoggedIn, login, logout, switchRole, hasPermission, hasActionPermission,
+    }),
-       hasDataSourcePermission, checkDataSourcePermissions, refreshPermissions,
+    [
-       clearPermissionCache, visibleMenuItems, hasRoleLevel]);
+      user,
+      isLoggedIn,
+      login,
+      logout,
+      switchRole,
+      hasPermission,
+      hasActionPermission,
+      hasDataSourcePermission,
+      checkDataSourcePermissions,
+      refreshPermissions,
+      clearPermissionCache,
+      visibleMenuItems,
+      hasRoleLevel,
+    ],
+  );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
@@ -525,7 +583,7 @@ export function useDataSourcePermission(
   instanceId: number,
   action: 'read' | 'write' | 'delete' | 'export',
   database?: string,
-  table?: string
+  table?: string,
 ): boolean {
   const { hasDataSourcePermission } = useAuth();
   return hasDataSourcePermission(instanceId, action, database, table);