React单页应用中如何实现会话管理与中间件鉴权？

你之前写的Express会话鉴权逻辑是服务端渲染场景下的标准方案，核心是用户每触发一次页面跳转，请求都会先到达后端，中间件提前拦截校验，不满足权限直接返回302重定向，前端全程接触不到未授权的页面内容。但React SPA的运行逻辑完全不同：页面路由、渲染逻辑全在用户浏览器侧加载执行，后端只负责提供数据接口，不直接返回页面内容，所以鉴权逻辑的实现位置要做调整。

前端路由中间件（路由守卫）实现 #

React生态最常用的React Router提供了完全可以平替Express中间件的能力，核心思路是在路由匹配之后、页面组件渲染之前插入权限校验逻辑，和你写的auth中间件执行逻辑完全一致。
以React Router v6为例，最简实现如下：

// 前端鉴权中间件，等价于你之前写的Express auth方法
import { Navigate } from 'react-router-dom';

const RequireAuth = ({ children }) => {
  // 从全局状态/本地存储取登录态，不需要每次跳转都发请求
  const isLoggedIn = checkLocalLoginStatus();

  if (!isLoggedIn) {
    // 未登录直接替换跳转至登录页，不会渲染目标页面
    return <Navigate to="/login" replace />;
  }
  // 已登录放行，渲染目标页面
  return children;
}

// 路由配置时给需要鉴权的页面套上中间件即可
const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />
  },
  {
    path: '/',
    element: (
      <RequireAuth>
        <HomePage />
      </RequireAuth>
    )
  }
])

会话状态存储方案 #

前端不需要像Express那样在服务端存req.session变量，根据你选用的鉴权模式选存储方式即可：

• 如果沿用传统Cookie+Session模式：后端登录成功后种下HttpOnly Cookie，浏览器会自动在后续请求中携带Cookie，前端不需要手动存储会话凭证，只需要维护一个「是否登录」的标记位即可
• 如果选用Token鉴权模式：登录成功后拿到的Token可以存在localStorage或者运行时内存中，后续请求手动将Token加到请求头里传给后端校验即可

关于「先闪首页再跳登录页」的问题 #

只要逻辑写对就不会出现这个问题，注意规避两个常见坑：

• 不要把初始登录状态默认设为true：如果需要向后端发请求校验登录状态，初始状态要设为「加载中」，请求返回前展示全局加载占位（比如骨架屏、loading动画），等拿到后端明确的已登录/未登录结果后，再决定渲染受保护页面还是跳转登录页
• 不要把校验逻辑写在页面组件的useEffect里：如果等首页组件挂载完才发请求校验登录态，必然会出现首页内容闪一下再跳转的问题，校验逻辑一定要放在路由渲染层级执行，和你在Express里把中间件加在路由处理函数之前是一个道理

最后要注意：前端路由守卫只能做体验层面的拦截，真正的权限校验必须全部放在后端接口层实现——用户可以随意修改浏览器端的前端代码绕过路由守卫，你之前写的Express auth中间件不要丢，要全部挂载到所有受保护的数据接口上，未登录的请求直接返回401状态码，前端接收到401响应后统一跳转登录页即可。

内容的提问来源于stack exchange，提问作者Thenu Kaluarachchi