rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Logan.Li committed 2026-10-26 18:06:22 +08:00
1 parent d867c276d4
commit 6945c53879
1 file changed
+262 -204
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/useAuth.tsx
+262 -204
View File
@@ -18,12 +18,24 @@ export type { UserRole };
/** 细粒度权限类型 */
export type PermissionAction =
| 'ticket.create' | 'ticket.approve' | 'ticket.execute' | 'ticket.rollback' | 'ticket.delete'
| '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';
| 'ticket.create'
| 'ticket.approve'
| 'ticket.execute'
| 'ticket.rollback'
| 'ticket.delete'
| '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,38 +152,42 @@ const CACHE_TTL = 5 * 60 * 1000; // 5分钟
const AuthContext = createContext<AuthContextType | null>(null);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<AuthUser>({
id: defaultUser.id,
username: defaultUser.username,
email: defaultUser.email,
role: defaultUser.role,
roleName: defaultUser.roleName,
avatar: defaultUser.avatar,
groupIds: [],
dataSourcePermissions: [],
customPermissions: {},
});
/** 从 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;
}
}
// 从 token 恢复基本用户信息（页面刷新时）
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;
});
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<AuthUser>(() =>
restoreUserFromToken({
id: defaultUser.id,
username: defaultUser.username,
email: defaultUser.email,
role: defaultUser.role,
roleName: defaultUser.roleName,
avatar: defaultUser.avatar,
groupIds: [],
dataSourcePermissions: [],
customPermissions: {},
}),
);
const [isLoggedIn, setIsLoggedIn] = useState(() => readStorage('token') !== null);
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 =>
ds.actions.some(action => ['write', 'delete', 'readwrite'].includes(String(action)))
));
return Boolean(
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,47 +283,48 @@ 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> => {
try {
const res = await authApi.login(username, password);
writeStorage('token', res.access_token);
if (res.refresh_token) {
writeStorage('refreshToken', res.refresh_token);
const login = useCallback(
async (username: string, password: string): Promise<boolean> => {
try {
const res = await authApi.login(username, password);
writeStorage('token', res.access_token);
if (res.refresh_token) {
writeStorage('refreshToken', res.refresh_token);
}
const u = res.user;
const role = u.role as UserRole;
// 解析后端返回的细粒度权限
const dataSourcePermissions: DataSourcePermission[] = u.data_source_permissions
? JSON.parse(u.data_source_permissions)
: [];
const customPermissions: Record<string, boolean> = u.custom_permissions ? JSON.parse(u.custom_permissions) : {};
const newUser: AuthUser = {
id: u.id,
username: u.username,
email: u.email || '',
role,
roleName: roleNameMap[role] || role,
avatar: u.display_name?.charAt(0) || username.charAt(0).toUpperCase(),
groupIds: u.group_ids || [],
dataSourcePermissions,
customPermissions,
permissionsUpdatedAt: Date.now(),
};
setUser(newUser);
setIsLoggedIn(true);
clearPermissionCache();
emitPermissionChange(newUser);
return true;
} catch {
return false;
}
const u = res.user;
const role = u.role as UserRole;
// 解析后端返回的细粒度权限
const dataSourcePermissions: DataSourcePermission[] = u.data_source_permissions
? JSON.parse(u.data_source_permissions)
: [];
const customPermissions: Record<string, boolean> = u.custom_permissions
? JSON.parse(u.custom_permissions)
: {};
const newUser: AuthUser = {
id: u.id,
username: u.username,
email: u.email || '',
role,
roleName: roleNameMap[role] || role,
avatar: u.display_name?.charAt(0) || username.charAt(0).toUpperCase(),
groupIds: u.group_ids || [],
dataSourcePermissions,
customPermissions,
permissionsUpdatedAt: Date.now(),
};
setUser(newUser);
setIsLoggedIn(true);
clearPermissionCache();
emitPermissionChange(newUser);
return true;
} 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,116 +352,136 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
emitPermissionChange({} as AuthUser);
}, [clearPermissionCache, emitPermissionChange]);
const switchRole = useCallback((role: UserRole) => {
setUser(prev => {
const newUser: AuthUser = {
...prev,
role,
roleName: roleNameMap[role],
username: role === 'admin' ? 'admin' : role === 'dba' ? 'zhangsan' : role === 'developer' ? 'wangwu' : 'visitor',
email: `${role}@company.com`,
avatar: role.charAt(0).toUpperCase(),
};
clearPermissionCache();
emitPermissionChange(newUser);
return newUser;
});
}, [clearPermissionCache, emitPermissionChange]);
const switchRole = useCallback(
(role: UserRole) => {
setUser((prev) => {
const newUser: AuthUser = {
...prev,
role,
roleName: roleNameMap[role],
username:
role === 'admin' ? 'admin' : role === 'dba' ? 'zhangsan' : role === 'developer' ? 'wangwu' : 'visitor',
email: `${role}@company.com`,
avatar: role.charAt(0).toUpperCase(),
};
clearPermissionCache();
emitPermissionChange(newUser);
return newUser;
});
},
[clearPermissionCache, emitPermissionChange],
);
/** 菜单权限检查（带缓存） */
const hasPermission = useCallback((menuId: string): boolean => {
if (!isLoggedIn) return false;
const hasPermission = useCallback(
(menuId: string): boolean => {
if (!isLoggedIn) return false;
const cache = permissionCacheRef.current;
if (isCacheValid() && cache.menu.has(menuId)) {
return cache.menu.get(menuId)!;
}
const cache = permissionCacheRef.current;
if (isCacheValid() && cache.menu.has(menuId)) {
return cache.menu.get(menuId)!;
}
const result = canAccessMenu(menuId, {
role: user.role,
customPermissions: user.customPermissions,
hasWritableDataSourceAccess,
});
cache.menu.set(menuId, result);
cache.timestamp = Date.now();
return result;
}, [user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid]);
const result = canAccessMenu(menuId, {
role: user.role,
customPermissions: user.customPermissions,
hasWritableDataSourceAccess,
});
cache.menu.set(menuId, result);
cache.timestamp = Date.now();
return result;
},
[user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid],
);
/** 操作权限检查（带缓存，支持自定义权限覆盖） */
const hasActionPermission = useCallback((action: PermissionAction | string): boolean => {
if (!isLoggedIn) return false;
const hasActionPermission = useCallback(
(action: PermissionAction | string): boolean => {
if (!isLoggedIn) return false;
const cache = permissionCacheRef.current;
if (isCacheValid() && cache.action.has(action)) {
return cache.action.get(action)!;
}
const cache = permissionCacheRef.current;
if (isCacheValid() && cache.action.has(action)) {
return cache.action.get(action)!;
}
const result = canPerformAction(action, {
role: user.role,
customPermissions: user.customPermissions,
hasWritableDataSourceAccess,
}, actionPermissionMap);
cache.action.set(action, result);
cache.timestamp = Date.now();
return result;
}, [user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid]);
const result = canPerformAction(
action,
{
role: user.role,
customPermissions: user.customPermissions,
hasWritableDataSourceAccess,
},
actionPermissionMap,
);
cache.action.set(action, result);
cache.timestamp = Date.now();
return result;
},
[user.role, user.customPermissions, hasWritableDataSourceAccess, isLoggedIn, isCacheValid],
);
/** 数据源级权限检查 */
const hasDataSourcePermission = useCallback((
instanceId: number,
action: 'read' | 'write' | 'delete' | 'export',
database?: string,
table?: string
): boolean => {
if (!isLoggedIn) return false;
if (user.role === 'admin') return true; // 管理员拥有所有数据源权限
const hasDataSourcePermission = useCallback(
(
instanceId: number,
action: 'read' | 'write' | 'delete' | 'export',
database?: string,
table?: string,
): boolean => {
if (!isLoggedIn) return false;
if (user.role === 'admin') return true; // 管理员拥有所有数据源权限
const cache = permissionCacheRef.current;
const cacheKey = `${instanceId}:${action}:${database || '*'}:${table || '*'}`;
if (isCacheValid() && cache.dataSource.has(cacheKey)) {
return cache.dataSource.get(cacheKey)!;
}
const cache = permissionCacheRef.current;
const cacheKey = `${instanceId}:${action}:${database || '*'}:${table || '*'}`;
if (isCacheValid() && cache.dataSource.has(cacheKey)) {
return cache.dataSource.get(cacheKey)!;
}
const perms = user.dataSourcePermissions || [];
if (perms.length === 0) {
cache.dataSource.set(cacheKey, false);
return false;
}
const perms = user.dataSourcePermissions || [];
if (perms.length === 0) {
cache.dataSource.set(cacheKey, false);
return false;
}
const hasPerm = perms.some((ds: DataSourcePermission) => {
// 检查实例ID
if (ds.instanceId !== instanceId) return false;
const hasPerm = perms.some((ds: DataSourcePermission) => {
// 检查实例ID
if (ds.instanceId !== instanceId) return false;
// 检查操作权限
if (!ds.actions.includes(action)) return false;
// 检查操作权限
if (!ds.actions.includes(action)) return false;
// 检查数据库级别
if (database && ds.database && ds.database !== database) return false;
// 检查数据库级别
if (database && ds.database && ds.database !== database) return false;
// 检查表级别
if (table && ds.tables && ds.tables.length > 0 && !ds.tables.includes(table)) return false;
// 检查表级别
if (table && ds.tables && ds.tables.length > 0 && !ds.tables.includes(table)) return false;
return true;
});
return true;
});
cache.dataSource.set(cacheKey, hasPerm);
cache.timestamp = Date.now();
return hasPerm;
}, [user.dataSourcePermissions, user.role, isLoggedIn, isCacheValid]);
cache.dataSource.set(cacheKey, hasPerm);
cache.timestamp = Date.now();
return hasPerm;
},
[user.dataSourcePermissions, user.role, isLoggedIn, isCacheValid],
);
/** 批量检查数据源权限 */
const checkDataSourcePermissions = useCallback((
instanceId: number,
actions: ('read' | 'write' | 'delete' | 'export')[],
database?: 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]);
const checkDataSourcePermissions = useCallback(
(
instanceId: number,
actions: ('read' | 'write' | 'delete' | 'export')[],
database?: 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],
);
/** 从服务器刷新用户权限 */
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
? JSON.parse(u.custom_permissions)
: {};
const customPermissions: Record<string, boolean> = u.custom_permissions ? JSON.parse(u.custom_permissions) : {};
const newUser: AuthUser = {
...user,
@@ -475,35 +515,53 @@ 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 => {
return roleWeightMap[user.role] >= roleWeightMap[minRole];
}, [user.role]);
const hasRoleLevel = useCallback(
(minRole: UserRole): boolean => {
return roleWeightMap[user.role] >= roleWeightMap[minRole];
},
[user.role],
);
const value = useMemo(() => ({
user,
isLoggedIn,
login,
logout,
switchRole,
hasPermission,
hasActionPermission,
hasDataSourcePermission,
checkDataSourcePermissions,
refreshPermissions,
clearPermissionCache,
visibleMenuItems,
isAdmin: user.role === 'admin',
isDBA: user.role === 'dba',
isDeveloper: user.role === 'developer',
isGuest: user.role === 'auditor',
hasRoleLevel,
}), [user, isLoggedIn, login, logout, switchRole, hasPermission, hasActionPermission,
hasDataSourcePermission, checkDataSourcePermissions, refreshPermissions,
clearPermissionCache, visibleMenuItems, hasRoleLevel]);
const value = useMemo(
() => ({
user,
isLoggedIn,
login,
logout,
switchRole,
hasPermission,
hasActionPermission,
hasDataSourcePermission,
checkDataSourcePermissions,
refreshPermissions,
clearPermissionCache,
visibleMenuItems,
isAdmin: user.role === 'admin',
isDBA: user.role === 'dba',
isDeveloper: user.role === 'developer',
isGuest: user.role === 'auditor',
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);