React应用中基于JWT的用户安全验证：现有实现是否安全？

我目前正在开发React前端，后端采用Express运行。搭建了一个登录表单，提交后请求服务器，若用户名和密码有效，会收到JWT认证令牌。随后获取该令牌并设置user状态：

try {
  const user = await loginService.login({
    username,
    password,
  });
  setUser(user);
}

最终根据user状态控制页面展示：未登录时显示登录表单，已登录时展示内容：

<div>
  {user ? (
    <div>
      <h2>blogs</h2>
      <p>{user.username} logged in </p>
      {blogs.map((blog) => (
        <Blog key={blog.id} blog={blog} />
      ))}
    </div>
  ) : (
    <Login setUser={setUser} />
  )}
</div>

我对该流程产生疑问：这种验证方式是否安全？我们本质上通过user状态是否已设置来完成用户验证，但由于完全在前端实现，用户是否可以直接修改user变量的状态？

核心结论：前端状态判断仅用于UI控制，绝不能作为安全验证的核心依据 #

• 用户确实能直接修改前端user状态
  借助浏览器的React DevTools或控制台，任何人都能手动修改user变量的值，直接绕过UI层面的登录判断看到受保护的页面结构。但这只是前端视觉上的“绕过”，真正的安全风险不在这一层。

• 真正的安全边界在后端
  你当前的流程里，登录后拿到JWT才是关键。接下来所有涉及用户权限的请求（比如获取博客列表、修改内容），必须在后端完成JWT验证：

  1. 前端每次请求时，要在请求头里携带JWT（格式如Authorization: Bearer <token>）
  2. Express后端需通过中间件验证JWT的签名合法性、过期时间，解析出真实的用户身份后，再返回对应数据
     就算用户篡改了前端user状态，但没有有效的JWT，后端会直接拒绝请求，前端就算显示了页面框架，也拿不到真实的敏感数据。

• 优化建议

  1. 完善JWT的存储与校验逻辑：
     • 登录成功后，把JWT存入localStorage/sessionStorage（注意防范XSS攻击，更安全的方式是用HttpOnly Cookie存储JWT）
     • 页面刷新时，先从存储读取JWT，调用后端接口验证令牌有效性，再决定是否设置user状态，避免刷新后登录状态丢失
  2. 前端路由拦截仅做辅助：可以给受保护路由加拦截逻辑，但这只是提升用户体验，核心安全校验必须放在后端
  3. 后端不要信任前端传来的用户信息：比如不要直接用前端传的username做权限判断，必须从JWT中解析出用户ID、权限等核心信息

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