React项目如何创建支持未授权访问的访客用户页面路由

优先选扩展现有集中式routes配置的方案，不要把访客路由硬编码散写在App.js里。你现在已经做了集中式路由管理，散写路由会导致后续维护需要同时翻配置文件和入口文件，时间长了很容易出现路由规则不一致的问题。

具体改造只需要在现有逻辑基础上扩展，不用推翻原有实现：

1. 扩展routes配置项的权限标记 #

给每个路由配置新增requiresAuth字段，原有仪表盘类路由（Dashboards、Tools、Settings、Sign Out及对应嵌套子路由）统一设为true，新增的访客表单路由设为false，额外加个菜单隐藏标记避免访客路由出现在登录后的系统侧边栏/顶部菜单中：

// 集中式routes配置文件
const routes = [
  // 原有需认证的仪表盘类路由
  {
    path: '/dashboards',
    element: <Dashboards />,
    requiresAuth: true,
    children: [/* 原有collapse嵌套路由配置保持不变 */]
  },
  {
    path: '/tools',
    element: <Tools />,
    requiresAuth: true
  },
  {
    path: '/settings',
    element: <Settings />,
    requiresAuth: true
  },
  {
    path: '/sign-out',
    element: <SignOut />,
    requiresAuth: true
  },
  // 新增访客公开路由
  {
    path: '/guest_user',
    element: <GuestUser />,
    requiresAuth: false,
    hideInMenu: true // 菜单渲染时跳过该项，不展示在仪表盘菜单中
  }
]

如果你原来有遍历routes生成系统菜单的逻辑，只要在遍历的时候过滤掉hideInMenu: true的项即可，原有菜单渲染逻辑基本不用改。

2. 改造getRoutes方法，统一加路由守卫 #

原有递归遍历生成Route的逻辑不用大改，只需要在渲染路由元素的时候根据requiresAuth字段做权限拦截即可：

const getRoutes = (routesList) => {
  return routesList.map(route => {
    // 需要认证的路由套一层权限守卫，公开路由直接渲染
    const routeElement = route.requiresAuth 
      ? <AuthGuard>{route.element}</AuthGuard>
      : route.element;

    // 原有递归处理嵌套路由的逻辑完全保留
    if (route.children?.length) {
      return (
        <Route key={route.path} path={route.path} element={routeElement}>
          {getRoutes(route.children)}
        </Route>
      )
    }
    return <Route key={route.path} path={route.path} element={routeElement} />
  })
}

其中权限守卫组件逻辑很简单，判断登录状态做重定向即可：

const AuthGuard = ({ children }) => {
  // 替换为你项目实际的登录状态判断逻辑，比如取本地token、读全局认证状态
  const isAuthenticated = !!localStorage.getItem('access_token');
  // 未登录访问需认证的页面时，直接重定向到访客表单页
  if (!isAuthenticated) {
    return <Navigate to="/guest_user" replace />
  }
  return children;
}

3. 调整App.js里的路由渲染和兜底逻辑 #

不需要单独硬编码/guest_user路由，直接调用getRoutes生成所有路由规则即可，通配符兜底逻辑根据登录状态做对应跳转：

// App.js中Routes组件部分
<Routes>
  {getRoutes(routes)}
  {/* 通配符路径兜底 */}
  <Route 
    path="*" 
    element={
      isAuthenticated 
        ? <Navigate to="/dashboards" replace /> 
        : <Navigate to="/guest_user" replace />
    } 
  />
</Routes>

为什么不推荐直接在App.js单独声明访客路由 #

• 所有路由规则收口在同一个配置文件，后续新增/修改路由不需要跨文件查找，维护成本低
• 权限判断逻辑统一，后续再加其他公开路由（比如登录页、合规说明页）只需要在routes里加对应标记，不需要重复写守卫逻辑
• 对原有代码侵入性极小，原来处理collapse嵌套路由、渲染菜单的逻辑几乎不需要改动

内容的提问来源于stack exchange，提问作者Mustafa Yusuf