fec-route-protectionlisted
Install: claude install-skill bovinphang/frontend-craft
# 路由保护
## 用途
为前端应用建立清晰的认证、授权和重定向边界，避免越权访问与闪烁渲染。
## 适用场景
- 页面需要登录后访问，或不同角色看到不同路由。
- 需要实现 React Router、Next.js、Nuxt 或 Vue Router 的路由守卫。
- 登录过期、权限不足、组织/租户切换需要统一处理。
- 不用于替代服务端授权；前端路由保护只能改善体验，不能作为唯一安全边界。
## 流程
### 1. 定义认证与授权状态
```ts
export type AuthStatus = "loading" | "anonymous" | "authenticated";
export interface CurrentUser {
id: string;
roles: string[];
permissions: string[];
}
export function canAccess(user: CurrentUser, required: string[]) {
return required.every((permission) => user.permissions.includes(permission));
}
```
### 2. React Router 使用布局守卫
```tsx
import { Navigate, Outlet, useLocation } from "react-router-dom";
interface ProtectedRouteProps {
requiredPermissions?: string[];
}
export function ProtectedRoute({ requiredPermissions = [] }: ProtectedRouteProps) {
const location = useLocation();
const { status, user } = useAuth();
if (status === "loading") return <RouteLoading />;
if (status === "anonymous") {
return <Navigate to="/login" replace state={{ from: location }} />;
}
if (requiredPermissions.length > 0 && !canAccess(user, requiredPermissions)) {
return <Navigate to="/403" replace />;
}
return <Outlet />;
}
```
```tsx
const router = createBrowserRouter([
{
element: <ProtectedRoute requiredPermissions={["orders:read"]} />,
children: [{ path: "/orders", element: <OrdersPage /> }],
},
]);
```
### 3. Next.js 优先在服务端边界处理
```ts
// middleware.ts
import { NextResponse, type NextRequest } from "next/server