OrgTJWater/TJWaterFrontend_Refine
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(auth): align restricted header and logout state

Browse Source
This commit is contained in:
jiang
2026-11-04 14:12:44 +08:00
parent 80f05e481b
commit 5a0bb6864a
9 changed files with 206 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/authenticated.spec.ts
+36 -3
View File
@@ -17,6 +17,7 @@ test("已登录管理员可以打开审计日志页面", async ({ page }) => {
});
test("已认证但未授权的账号会看到明确说明", async ({ page }) => {
await page.addInitScript(() => window.localStorage.clear());
await page.route("**/api/v1/access-context", (route) =>
route.fulfill({
status: 403,
@@ -31,12 +32,44 @@ test("已认证但未授权的账号会看到明确说明", async ({ page }) =>
await expect(
page.getByText("身份认证已成功，但当前账号尚未由系统管理员启用"),
).toBeVisible();
await expect(page.getByText("TJWater 智慧水务平台")).toBeVisible();
await expect(page.getByRole("button", { name: "退出登录" })).toBeVisible();
const accountMenu = page.getByRole("button", {
name: "E2E 测试用户 账号菜单",
});
await expect(accountMenu).toBeVisible();
await accountMenu.click();
await expect(page.getByRole("menuitem", { name: "登出" })).toBeVisible();
await expect(page.getByRole("menuitem", { name: "切换项目" })).toHaveCount(0);
await page.keyboard.press("Escape");
await page.setViewportSize({ width: 390, height: 844 });
await expect(page.getByText("账号尚未获得访问权限")).toBeVisible();
await expect(page.getByRole("button", { name: "退出登录" })).toBeVisible();
await expect(accountMenu).toBeVisible();
});
test("无权访问项目时可以在窄屏切换项目", async ({ page }) => {
await page.route("**/api/v1/access-context", (route) =>
route.fulfill({
status: 403,
contentType: "application/json",
body: JSON.stringify({ detail: "No access to project" }),
}),
);
await page.setViewportSize({ width: 390, height: 844 });
await page.goto("/");
await expect(page.getByText("无权访问当前项目")).toBeVisible();
await page
.getByRole("button", { name: "E2E 测试用户 账号菜单" })
.click();
await page.getByRole("menuitem", { name: "切换项目" }).click();
const projectDialog = page.getByRole("dialog");
await expect(projectDialog).toBeVisible();
const bounds = await projectDialog.boundingBox();
expect(bounds).not.toBeNull();
expect(bounds!.x).toBeGreaterThanOrEqual(0);
expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(390);
});
test("系统管理员可以手动同步 Keycloak 用户目录", async ({ page }) => {
src/app/RefineContext.test.tsx
+35 -8
View File
@@ -18,6 +18,8 @@ let mockSessionState: {
},
status: "authenticated",
};
let mockPathname = "/network-simulation";
let mockProjectProviderBlocks = false;
jest.mock("next-auth/react", () => ({
SessionProvider: ({ children }: { children: ReactNode }) => children,
@@ -26,7 +28,7 @@ jest.mock("next-auth/react", () => ({
}));
jest.mock("next/navigation", () => ({
usePathname: () => "/network-simulation",
usePathname: () => mockPathname,
}));
jest.mock("@refinedev/core", () => ({
@@ -43,6 +45,11 @@ jest.mock("@refinedev/mui", () => ({
}));
jest.mock("@refinedev/nextjs-router", () => ({}));
jest.mock("@/components/header", () => ({
Header: ({ accessMode }: { accessMode: string }) => (
<div data-testid="access-header">{accessMode}</div>
),
}));
jest.mock("@providers/data-provider", () => ({ dataProvider: {} }));
jest.mock("@/providers/notification-provider/useAppNotificationProvider", () => ({
useAppNotificationProvider: {},
@@ -51,7 +58,8 @@ jest.mock("@contexts/color-mode", () => ({
ColorModeContextProvider: ({ children }: { children: ReactNode }) => children,
}));
jest.mock("@/contexts/ProjectContext", () => ({
ProjectProvider: ({ children }: { children: ReactNode }) => children,
ProjectProvider: ({ children }: { children: ReactNode }) =>
mockProjectProviderBlocks ? <div>请选择项目环境</div> : children,
}));
jest.mock("@/lib/authToken", () => ({
getAccessToken: jest.fn().mockResolvedValue("expired-access-token"),
@@ -62,6 +70,8 @@ describe("RefineContext access authentication", () => {
const originalRequest = global.Request;
beforeEach(() => {
mockPathname = "/network-simulation";
mockProjectProviderBlocks = false;
mockSessionState = {
data: {
accessToken: "expired-access-token",
@@ -116,6 +126,7 @@ describe("RefineContext access authentication", () => {
});
it("shows an authorization message when access-context rejects the account", async () => {
mockProjectProviderBlocks = true;
global.fetch = jest.fn().mockResolvedValue({
ok: false,
status: 403,
@@ -132,10 +143,7 @@ describe("RefineContext access authentication", () => {
expect(
await screen.findByText("账号尚未获得访问权限"),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "退出登录" }),
).toBeInTheDocument();
expect(screen.getByText("Test User")).toBeInTheDocument();
expect(screen.getByTestId("access-header")).toHaveTextContent("account");
expect(screen.queryByText("应用内容")).not.toBeInTheDocument();
expect(useAuthStore.getState()).toMatchObject({
sessionExpired: false,
@@ -159,8 +167,9 @@ describe("RefineContext access authentication", () => {
expect(await screen.findByText("无权访问当前项目")).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "切换项目" }),
).toBeInTheDocument();
screen.queryByRole("button", { name: "切换项目" }),
).not.toBeInTheDocument();
expect(screen.getByTestId("access-header")).toHaveTextContent("project");
expect(screen.queryByText("应用内容")).not.toBeInTheDocument();
});
@@ -183,4 +192,22 @@ describe("RefineContext access authentication", () => {
});
});
});
it("does not treat an intentional logout landing on login as session expiry", async () => {
mockPathname = "/login";
mockSessionState = { data: null, status: "unauthenticated" };
render(
<App>
<div>登录页面</div>
</App>,
);
await waitFor(() => {
expect(useAuthStore.getState()).toMatchObject({
sessionExpired: false,
sessionExpiryReason: null,
});
});
});
});
src/app/RefineContext.tsx
+35 -39
View File
@@ -68,7 +68,6 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
const markSessionExpired = useAuthStore((state) => state.markSessionExpired);
const clearSessionExpired = useAuthStore((state) => state.clearSessionExpired);
const currentProjectId = useProjectStore((state) => state.currentProjectId);
const setCurrentProject = useProjectStore((state) => state.setCurrentProject);
const currentProjectCode = useProjectStore(
(state) => state.currentProjectCode,
);
@@ -97,13 +96,17 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
return;
}
if (status === "unauthenticated") {
if (to === "/login") {
clearSessionExpired();
return;
}
markSessionExpired("unauthorized");
return;
}
if (status === "authenticated") {
clearSessionExpired();
}
}, [clearSessionExpired, data?.error, markSessionExpired, status]);
}, [clearSessionExpired, data?.error, markSessionExpired, status, to]);
useEffect(() => {
if (status !== "authenticated") {
@@ -190,6 +193,9 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
: useAuthStore.getState().accessToken,
}),
clearLocalState: () => {
const authStore = useAuthStore.getState();
authStore.setAccessToken(null);
authStore.clearSessionExpired();
if (data?.user?.id) {
sessionStorage.removeItem(`tjwater-login-audit:${data.user.id}`);
}
@@ -198,13 +204,6 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
navigate: (path) => window.location.assign(path),
});
const handleChooseAnotherProject = () => {
setCurrentProject(null, null);
localStorage.removeItem("MAP_WORKSPACE");
localStorage.removeItem("MAP_EXTENT");
window.location.assign("/");
};
const authProvider: AuthProvider = {
login: async () => {
signIn("keycloak", {
@@ -406,37 +405,34 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
];
return (
<ProjectProvider>
<RefineKbarProvider>
<ColorModeContextProvider defaultMode={props.defaultMode}>
<RefineSnackbarProvider>
<Refine
routerProvider={appRouterProvider}
dataProvider={dataProvider}
notificationProvider={useAppNotificationProvider}
authProvider={authProvider}
accessControlProvider={accessControlProvider}
resources={resources}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
<RefineKbarProvider>
<ColorModeContextProvider defaultMode={props.defaultMode}>
<RefineSnackbarProvider>
<Refine
routerProvider={appRouterProvider}
dataProvider={dataProvider}
notificationProvider={useAppNotificationProvider}
authProvider={authProvider}
accessControlProvider={accessControlProvider}
resources={resources}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
<SessionExpiryDialog expiresAt={data?.sessionExpiresAt} />
<RoutePermissionGuard
authenticated={status === "authenticated"}
accessDeniedReason={accessDeniedReason}
>
<SessionExpiryDialog expiresAt={data?.sessionExpiresAt} />
<RoutePermissionGuard
authenticated={status === "authenticated"}
accessDeniedReason={accessDeniedReason}
userName={data?.user?.name ?? data?.user?.username}
onLogout={() => void handleLogout()}
onChooseAnotherProject={handleChooseAnotherProject}
>
<ProjectProvider>
{props.children}
</RoutePermissionGuard>
<RefineKbar />
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
</RefineKbarProvider>
</ProjectProvider>
</ProjectProvider>
</RoutePermissionGuard>
<RefineKbar />
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
</RefineKbarProvider>
);
};
src/app/api/auth/[...nextauth]/options.test.ts
+31
View File
@@ -1,5 +1,36 @@
import authOptions from "./options";
describe("Keycloak profile mapping", () => {
const mapProfile = authOptions.providers[0].profile as (profile: {
sub: string;
preferred_username: string;
name?: string;
email?: string;
picture?: string;
}) => { image?: string | null };
it("uses the Keycloak picture instead of a shared local avatar", () => {
expect(
mapProfile({
sub: "user-1",
preferred_username: "zjb",
picture: "https://keycloak.example/avatar/zjb.png",
}),
).toMatchObject({
image: "https://keycloak.example/avatar/zjb.png",
});
});
it("leaves the image empty when Keycloak has no picture", () => {
const profile = mapProfile({
sub: "user-1",
preferred_username: "zjb",
});
expect(profile.image).toBeUndefined();
});
});
describe("NextAuth access token refresh", () => {
it("forces a Keycloak refresh for an agent credential request", async () => {
const previousEnv = {
src/app/api/auth/[...nextauth]/options.ts
+5 -2
View File
@@ -1,7 +1,6 @@
import { NextAuthOptions } from "next-auth";
import { JWT } from "next-auth/jwt";
import KeycloakProvider from "next-auth/providers/keycloak";
import Avatar from "@assets/avatar/avatar-small.jpeg";
const SESSION_MAX_AGE_SECONDS = 12 * 60 * 60;
const ACCESS_TOKEN_REFRESH_SKEW_MS = 30_000;
@@ -86,12 +85,16 @@ const authOptions: NextAuthOptions = {
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? "",
issuer: process.env.KEYCLOAK_ISSUER ?? "",
profile(profile) {
const picture =
typeof (profile as { picture?: unknown }).picture === "string"
? String((profile as { picture: string }).picture).trim()
: "";
return {
id: profile.sub,
username: profile.preferred_username,
name: profile.name ?? profile.preferred_username,
email: profile.email,
image: Avatar.src,
image: picture || null,
};
},
}),
src/components/auth/RoutePermissionGuard.test.tsx
+9 -15
View File
@@ -1,4 +1,4 @@
import { fireEvent, render, screen } from "@testing-library/react";
import { render, screen } from "@testing-library/react";
import { useAccessStore } from "@/store/accessStore";
import { useAuthStore } from "@/store/authStore";
@@ -8,6 +8,12 @@ jest.mock("next/navigation", () => ({
usePathname: () => "/network-simulation",
}));
jest.mock("@/components/header", () => ({
Header: ({ accessMode }: { accessMode: string }) => (
<div data-testid="access-header">{accessMode}</div>
),
}));
describe("RoutePermissionGuard", () => {
beforeEach(() => {
useAccessStore.setState({
@@ -53,43 +59,31 @@ describe("RoutePermissionGuard", () => {
});
it("keeps a minimal identity header and logout action for pending accounts", () => {
const onLogout = jest.fn();
render(
<RoutePermissionGuard
authenticated
accessDeniedReason="account"
userName="zjb"
onLogout={onLogout}
>
<div>受保护内容</div>
</RoutePermissionGuard>,
);
expect(screen.getByText("TJWater 智慧水务平台")).toBeInTheDocument();
expect(screen.getByText("当前登录账号")).toBeInTheDocument();
expect(screen.getByText("zjb")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "退出登录" }));
expect(onLogout).toHaveBeenCalledTimes(1);
expect(screen.getByTestId("access-header")).toHaveTextContent("account");
expect(screen.queryByText("受保护内容")).not.toBeInTheDocument();
});
it("keeps project recovery available when only the selected project is denied", () => {
const onChooseAnotherProject = jest.fn();
render(
<RoutePermissionGuard
authenticated
accessDeniedReason="project"
onChooseAnotherProject={onChooseAnotherProject}
>
<div>受保护内容</div>
</RoutePermissionGuard>,
);
expect(screen.getByText("无权访问当前项目")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "切换项目" }));
expect(onChooseAnotherProject).toHaveBeenCalledTimes(1);
expect(screen.getByTestId("access-header")).toHaveTextContent("project");
});
it("checks authentication before the expired state effect runs", () => {
src/components/auth/RoutePermissionGuard.tsx
+2 -73
View File
@@ -1,23 +1,17 @@
"use client";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import LogoutIcon from "@mui/icons-material/Logout";
import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
import {
Alert,
AppBar,
Avatar,
Box,
Button,
CircularProgress,
Stack,
Toolbar,
Typography,
} from "@mui/material";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { Title } from "@/components/title";
import { Header } from "@/components/header";
import { permissionForPath } from "@/lib/permissions";
import { useAccessStore } from "@/store/accessStore";
import { useAuthStore } from "@/store/authStore";
@@ -26,16 +20,10 @@ export const RoutePermissionGuard = ({
children,
authenticated,
accessDeniedReason = null,
userName,
onLogout,
onChooseAnotherProject,
}: {
children: ReactNode;
authenticated: boolean;
accessDeniedReason?: "account" | "project" | null;
userName?: string | null;
onLogout?: () => void;
onChooseAnotherProject?: () => void;
}) => {
const pathname = usePathname();
const permissions = useAccessStore((state) => state.permissions);
@@ -59,70 +47,11 @@ export const RoutePermissionGuard = ({
}
if (accessDeniedReason) {
const displayName = userName?.trim() || "已登录账号";
const accountPending = accessDeniedReason === "account";
return (
<Box sx={{ minHeight: "100vh", bgcolor: "background.default" }}>
<AppBar
color="inherit"
elevation={0}
position="static"
sx={{ borderBottom: 1, borderColor: "divider" }}
>
<Toolbar sx={{ gap: 2, justifyContent: "space-between" }}>
<Title />
<Stack direction="row" spacing={1.5} alignItems="center">
<Avatar sx={{ width: 32, height: 32, bgcolor: "primary.main" }}>
{displayName.slice(0, 1).toUpperCase()}
</Avatar>
<Box sx={{ display: { xs: "none", sm: "block" } }}>
<Typography variant="caption" color="text.secondary">
当前登录账号
</Typography>
<Typography variant="body2" fontWeight={600}>
{displayName}
</Typography>
</Box>
{!accountPending && (
<Button
aria-label="切换项目"
color="inherit"
onClick={onChooseAnotherProject}
sx={{
gap: { xs: 0, sm: 1 },
minWidth: { xs: 40, sm: "auto" },
px: { xs: 1, sm: 2 },
"&:active": { transform: "translateY(1px)" },
}}
variant="outlined"
>
<SwapHorizIcon fontSize="small" />
<Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
切换项目
</Box>
</Button>
)}
<Button
aria-label="退出登录"
color="inherit"
onClick={onLogout}
sx={{
gap: { xs: 0, sm: 1 },
minWidth: { xs: 40, sm: "auto" },
px: { xs: 1, sm: 2 },
"&:active": { transform: "translateY(1px)" },
}}
variant="outlined"
>
<LogoutIcon fontSize="small" />
<Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
退出登录
</Box>
</Button>
</Stack>
</Toolbar>
</AppBar>
<Header accessMode={accessDeniedReason} />
<Box
component="main"
sx={{
src/components/header/index.tsx
+48 -27
View File
@@ -3,6 +3,7 @@
import { ColorModeContext } from "@contexts/color-mode";
import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
import { FiUser } from "react-icons/fi";
import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
import Logout from "@mui/icons-material/Logout";
import SwapHoriz from "@mui/icons-material/SwapHoriz";
@@ -37,8 +38,13 @@ type IUser = {
avatar?: string;
};
export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
type HeaderProps = RefineThemedLayoutHeaderProps & {
accessMode?: "default" | "account" | "project";
};
export const Header: React.FC<HeaderProps> = ({
sticky = true,
accessMode = "default",
}) => {
const { mode, setMode } = useContext(ColorModeContext);
const { mutate: logout } = useLogout();
@@ -51,6 +57,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
);
const { data: user } = useGetIdentity<IUser>();
const restricted = accessMode !== "default";
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
@@ -92,7 +99,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
justifyContent="flex-end"
alignItems="center"
>
<HamburgerMenu />
{!restricted && <HamburgerMenu />}
<Stack
direction="row"
width="100%"
@@ -110,20 +117,26 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
{(user?.avatar || user?.name) && (
<>
<IconButton
color="inherit"
onClick={() => setShowChatbox(true)}
sx={{ mr: 1 }}
>
<IoChatbubbleEllipsesOutline />
</IconButton>
{!restricted && (
<IconButton
color="inherit"
onClick={() => setShowChatbox(true)}
sx={{ mr: 1 }}
>
<IoChatbubbleEllipsesOutline />
</IconButton>
)}
<ButtonBase
aria-label={
user?.name ? `${user.name} 账号菜单` : "账号菜单"
}
onClick={handleMenuOpen}
sx={{
borderRadius: "30px",
padding: "6px 12px",
marginLeft: "8px",
transition: "all 0.3s ease",
transition:
"background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease",
border: "1px solid transparent",
"&:hover": {
backgroundColor:
@@ -182,7 +195,9 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
borderColor: "primary.main",
},
}}
/>
>
{!user?.avatar && <FiUser aria-hidden="true" />}
</Avatar>
</Stack>
</ButtonBase>
<Menu
@@ -208,13 +223,15 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
},
}}
>
<MenuItem onClick={handleSwitchProjectClick}>
<ListItemIcon>
<SwapHoriz fontSize="small" />
</ListItemIcon>
<ListItemText>切换项目</ListItemText>
</MenuItem>
<Divider />
{accessMode !== "account" && (
<MenuItem onClick={handleSwitchProjectClick}>
<ListItemIcon>
<SwapHoriz fontSize="small" />
</ListItemIcon>
<ListItemText>切换项目</ListItemText>
</MenuItem>
)}
{accessMode !== "account" && <Divider />}
<MenuItem onClick={() => logout()}>
<ListItemIcon>
<Logout fontSize="small" />
@@ -222,17 +239,21 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
<ListItemText>登出</ListItemText>
</MenuItem>
</Menu>
<ProjectSelector
open={showProjectSelector}
onSelect={handleProjectSelect}
onClose={() => setShowProjectSelector(false)}
/>
{accessMode !== "account" && (
<ProjectSelector
open={showProjectSelector}
onSelect={handleProjectSelect}
onClose={() => setShowProjectSelector(false)}
/>
)}
</>
)}
<GlobalChatbox
open={showChatbox}
onClose={() => setShowChatbox(false)}
/>
{!restricted && (
<GlobalChatbox
open={showChatbox}
onClose={() => setShowChatbox(false)}
/>
)}
</Stack>
</Stack>
</Toolbar>
src/components/project/ProjectSelector.tsx
+5 -2
View File
@@ -132,8 +132,11 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
paper: {
sx: {
borderRadius: 2,
padding: 2,
minWidth: 400,
boxSizing: "border-box",
margin: { xs: 2, sm: 4 },
padding: { xs: 1.5, sm: 2 },
width: { xs: "calc(100vw - 32px)", sm: 400 },
maxWidth: "calc(100vw - 32px)",
background: "rgba(255, 255, 255, 0.95)",
backdropFilter: "blur(10px)",
position: "relative",