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

最新推荐文章于 2025-06-19 16:00:00 发布

原创最新推荐文章于 2025-06-19 16:00:00 发布 · 1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React 专栏收录该内容

22 篇文章

订阅专栏

动态路由（如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(); // 尝试刷新token
    return 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 // 每分钟验证权限
  };
}