当前位置：首页 > ds >正文

第十五节：实战场景-React路由权限控制方案

ds 2025/7/21 3:16:31

动态路由（如Next.js）+ 高阶组件封装
服务端鉴权与客户端路由守卫结合

React 路由权限控制综合方案解析（Next.js + 服务端鉴权）

一、动态路由加载与权限分层控制

1. Next.js 动态路由实现方案
结合 Next.js 的文件系统路由特性，实现基于权限的动态路由加载：

// app/dashboard/layout.js
import { getPermissions } from '@/lib/auth';export async function generateRoutes() {const { role } = await getPermissions(); // 服务端获取权限return [{ path: '/dashboard', component: Dashboard },role === 'admin' && { path: '/admin', component: AdminPanel }].filter(Boolean);
}// app/dashboard/page.js
export default function Dashboard() {const [routes] = useDynamicRoutes();return <>{routes.map(route => <Route key={route.path} {...route} />)}</>;
}

关键特性：
• 服务端组件获取用户权限
• 动态生成路由配置并过滤无权限项
• 支持按需加载组件（代码分割）

2. 权限分层策略

层级	实现方式	优势
页面级	动态路由配置	减少无效路由加载
模块级	按角色拆分路由文件	降低维护复杂度
功能级	组件内权限校验	细粒度控制按钮/功能

二、高阶组件封装与路由守卫

1. 高阶组件实现方案

// components/AuthRoute.jsx
const AuthRoute = ({ roles, component: Component }) => {const { user } = useAuth();const location = useLocation();if (!roles.includes(user?.role)) {return <Navigate to="/403" state={{ from: location }} replace />;}return <Component />;
};// 使用示例
<Route path="/admin" element={<AuthRoute roles={['admin']} component={Admin} />} />

核心逻辑：
• 继承 React Router v6 的 <Outlet> 机制
• 支持嵌套路由权限校验
• 自动传递路由参数与状态

2. 路由守卫优化技巧

// 全局路由守卫
router.beforeEach(async (to) => {if (to.meta.requiresAuth && !store.auth.valid) {await store.refreshToken(); // 尝试刷新tokenreturn store.auth.valid ? true : '/login';}
});

关键改进：
• Token 自动刷新机制
• 异步权限校验支持
• 404 兜底处理

三、服务端鉴权与客户端联动

1. 鉴权流程设计
请添加图片描述

技术要点：
• 边缘计算鉴权（Next.js Middleware）
• JWT 双 Token 机制（Access+Refresh）
• 权限数据加密传输

2. 数据同步方案

// lib/auth.js
export async function syncPermissions() {const res = await fetch('/api/auth');const { permissions } = await res.json();// 更新客户端路由const dynamicRoutes = generateRoutes(permissions);router.addRoutes(dynamicRoutes);// 持久化存储sessionStorage.setItem('permissions', JSON.stringify(permissions));
}

核心功能：
• 服务端驱动路由更新
• 本地缓存自动恢复
• 路由版本控制（防止缓存过期）

四、Next.js 进阶实践

1. Middleware 边缘鉴权

// middleware.ts
import { NextResponse } from 'next/server';export function middleware(request) {const token = request.cookies.get('auth_token');const pathname = request.nextUrl.pathname;if (pathname.startsWith('/admin') && !verifyToken(token)) {return NextResponse.redirect(new URL('/login', request.url));}return NextResponse.next();
}

优势：
• 前置权限校验减少客户端负载
• 支持边缘节点缓存策略
• 无缝集成服务端组件

2. 增量静态再生（ISR）优化

// pages/dashboard/[section].js
export async function getStaticProps() {const posts = await fetchPermissionsData();return {props: { posts },revalidate: 60 // 每分钟验证权限};
}