React动态路由鉴权方案

在React中实现动态路由鉴权需要结合路由权限验证和动态路由加载机制。

一、核心实现思路

1. ‌动态路由配置‌

   • 预先定义完整路由结构，包含path、component、roles权限字段。
   • 根据用户权限过滤有效路由列表，实现动态加载。

2. ‌鉴权验证机制‌

   • 结合Token验证和角色/权限码比对进行访问控制。
   • 使用高阶组件或路由封装拦截未授权访问。

3. ‌服务端与客户端结合‌

   • 服务端返回用户权限数据，客户端维护权限树并生成动态路由。

二、核心代码实现 

1. 权限上下文模块（AuthContext.jsx） 

createContext 创建了一个全局的认证上下文对象 AuthContext，用于跨组件共享认证状态。
useContext 提供访问上下文的方法。
useState 和 useEffect 用于管理认证相关的状态和副作用。

import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();
//AuthProvider 是一个高阶组件
export const AuthProvider = ({ children }) => {
/*
user：存储当前用户信息，默认值为 null 表示未登录。
permissions：存储用户的权限列表，初始为空数组。
loading：用于标记权限数据是否正在加载，初始值为 true。
*/
  const [user, setUser] = useState(null);
  const [permissions, setPermissions] = useState([]);
  const [loading, setLoading] = useState(true);

  // 模拟异步获取权限
  useEffect(() => {
    const fetchPermissions = async () => {
      try {
        // 实际项目中替换为API调用
        await new Promise(resolve => setTimeout(resolve, 500));
        setPermissions(['dashboard_read']);
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    };

    fetchPermissions();
  }, []);

  const login = async (credentials) => {
    // 实际登录逻辑
    setUser({ id: 1, role: 'admin' });
  };

  const logout = () => { 
    setUser(null);
    localStorage.removeItem('token');
  };

  return (
    <AuthContext.Provider value={{ 
      user, 
      permissions,
      loading,
      login,
      logout 
    }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

 2. 路由配置模块（routes.js）

lazy：用于懒加载组件，按需加载页面组件以优化性能。

Suspense：配合 lazy 使用，指定加载时的 fallback UI（如加载动画）。

Navigate：React Router 的重定向组件，用于权限校验失败时跳转。

useRoutes：React Router v6 的路由定义方式，通过数组配置路由规则。

Layout：公共布局组件，包裹所有路由页面。

ErrorBoundary：错误边界组件，捕获子组件异常并展示错误页面。

LoadingSpinner：全局加载指示器组件。

import { lazy, Suspense } from 'react';
import { Navigate, useRoutes } from 'react-router-dom';
import Layout from './Layout';
import ErrorBoundary from './ErrorBoundary';
import LoadingSpinner from './LoadingSpinner';

// 动态导入组件
const Dashboard = lazy(() => import('./pages/Dashboard'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));
const Login = lazy(() => import('./pages/Login'));
const Forbidden = lazy(() => import('./pages/403'));
const NotFound = lazy(() => import('./pages/404'));

const ProtectedWrapper = ({ children, roles, permissions }) => {
  const { user, permissions: userPerms } = useAuth();
  const location = useLocation();
/*
未登录用户：直接跳转到 /login，并携带当前路径作为返回地址。
角色校验：检查用户角色是否在允许的角色列表中（如 roles: ['admin']）。
权限粒度校验：检查用户权限是否包含路由所需的权限（如 permissions: ['dashboard_read']）。
*/

  if (!user) return <Navigate to="/login" state={{ from: location }} replace />;
  
  if (roles && !roles.includes(user.role)) return <Navigate to="/403" replace />;
  
  if (permissions && !permissions.some(p => userPerms.includes(p))) {
    return <Navigate to="/403" replace />;
  }

  return children;
};

export default function Routes() {
  const elements = useRoutes([
    {
      element: <Layout />,
      children: [
        {
          path: '/',
          element: <Navigate to="/dashboard" replace />
        },
        {
          path: 'dashboard',
          handle: { title: '仪表盘' },
          element: (
            <ProtectedWrapper permissions={['dashboard_read']}>
              <Dashboard />
            </ProtectedWrapper>
          )
        },
/*
客户端校验：通过 ProtectedWrapper 检查用户角色是否为 admin。
服务端校验：loader 函数用于服务端二次验证（需配合 React Router 的数据加载机制）。
双重校验：客户端权限控制 + 服务端权限验证，提升安全性。
*/
        {
          path: 'admin',
          handle: { title: '管理面板' },
          loader: async () => {
            // 服务端二次校验
            const res = await checkAdminPrivilege();
            if (!res.ok) throw redirect('/403');
          },
          element: (
            <ProtectedWrapper roles={['admin']}>
              <AdminPanel />
            </ProtectedWrapper>
          )
        },
        {
          path: 'login',
          element: <Login />
        },
        {
          path: '403',
          element: <Forbidden />
        },
        {
          path: '*',
          element: <NotFound />
        }
      ]
    }
  ]);
/*
ErrorBoundary：捕获所有路由组件中的异常，防止应用崩溃。
Suspense：在动态导入组件加载时显示 LoadingSpinner。
*/
  return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingSpinner />}>
        {elements}
      </Suspense>
    </ErrorBoundary>
  );
}

3.布局组件（Layout.jsx） 

import { Outlet } from 'react-router-dom';
import Navigation from './Navigation';

export default function Layout() {
  return (
    <div className="app-container">
      <Navigation />
      <main className="content-area">
        <Outlet /> {/* 嵌套路由渲染位置 */}
      </main>
    </div>
  );
}

4.错误边界处理（ErrorBoundary.jsx） 

import { Component } from 'react';

export default class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error caught:', error, info);
  }

  render() {
    return this.state.hasError ? (
      <div className="error-fallback">
        <h2>页面加载出错</h2>
        <button onClick={() => window.location.reload()}>重试</button>
      </div>
    ) : this.props.children;
  }
}

 5. 路由入口模块（App.jsx）

import { BrowserRouter as Router } from 'react-router-dom';
import { AuthProvider } from './auth-context';
import Routes from './routes';

export default function App() {
  return (
    <Router>
      <AuthProvider>
        <Routes />
      </AuthProvider>
    </Router>
  );
}

6. HTTP请求拦截器（axios.js）

import axios from 'axios';

const http = axios.create({
  baseURL: process.env.REACT_APP_API_URL
});

// 请求拦截
http.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截
http.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      window.location.href = '/login?expired=true';
    }
    return Promise.reject(error);
  }
);

export default http;