React应用中如何防止篡改状态查看未授权页面内容？

前端状态本身完全不可信，用户通过DevTools篡改state只是表象，核心是要从权限校验逻辑的根源优化，结合以下方案可以有效降低这类问题的发生：

1. 避免直接依赖客户端本地状态做权限判断 #

不要把角色信息存在React state后就直接用来做渲染判断，而是每次需要渲染敏感内容时，都通过服务端接口做实时权限校验。比如封装一个权限校验函数：

async function checkAdminPermission() {
  try {
    const response = await fetch('/api/check-admin-permission', {
      credentials: 'include' // 携带用户认证Cookie
    });
    return response.ok;
  } catch (err) {
    return false;
  }
}

在组件中通过异步方式获取权限状态后再渲染：

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  const [canAccessAdmin, setCanAccessAdmin] = useState(false);
  const [canAccessProfile, setCanAccessProfile] = useState(false);

  useEffect(() => {
    async function fetchPermissions() {
      const [adminRes, profileRes] = await Promise.all([
        checkAdminPermission(),
        fetch('/api/check-authenticated').then(res => res.ok)
      ]);
      setCanAccessAdmin(adminRes);
      setCanAccessProfile(profileRes);
    }
    fetchPermissions();
    // 定期刷新权限，比如每5分钟
    const interval = setInterval(fetchPermissions, 300000);
    return () => clearInterval(interval);
  }, []);

  return (
    <nav>
      <ul>
        {canAccessAdmin && (
          <li><Link to="/admin">Admin</Link></li>
        )}
        {canAccessProfile && (
          <li><Link to="/profile">Profile</Link></li>
        )}
        <li><Link to="/">Home</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

2. 用加密签名的凭证存储权限信息 #

如果必须在前端存储权限相关数据，不要存明文的role字符串，而是存储服务端签名的JWT（放在localStorage或sessionStorage）。每次前端判断权限前，先验证JWT的签名有效性——用户篡改JWT内容后，签名会失效，前端直接拒绝使用该凭证。

示例代码：

import jwtDecode from 'jwt-decode';

function validateToken(token) {
  try {
    const decoded = jwtDecode(token);
    // 可以发起服务端接口验证签名，或用公钥本地验证
    return fetch('/api/validate-token', {
      headers: { Authorization: `Bearer ${token}` }
    }).then(res => res.ok);
  } catch (err) {
    return false;
  }
}

3. 采用服务端渲染（SSR）做权限过滤 #

如果使用Next.js、Remix等SSR框架，权限判断直接在服务端完成：服务端先校验用户角色，再渲染对应权限的页面内容，客户端拿到的是已经过滤后的HTML，根本不会接收到未授权的链接代码，从根源上避免用户篡改前端状态看到敏感内容。

4. 生产环境禁用React DevTools（辅助手段） #

虽然不能彻底阻止技术熟练的用户，但可以在生产环境禁用React DevTools，减少普通用户篡改state的可能性：

if (process.env.NODE_ENV === 'production') {
  const devtools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  if (devtools) {
    devtools.emit = () => {};
    devtools.onCommitFiberRoot = () => {};
  }
}

核心原则 #

前端权限控制只是体验优化，所有敏感接口和页面跳转的权限校验必须在服务端完成——即使用户通过某种方式看到了未授权链接，点击后服务端也会直接拒绝请求，这是不可动摇的安全底线。

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