如何防止用户通过Redux/React开发者工具修改Store保障授权路由安全？

首先得明确一个核心原则：前端的任何状态（包括Redux Store）都是完全可控的，用户不仅能通过开发者工具修改，甚至可以直接篡改本地存储、请求参数。所以你的授权逻辑不能只依赖前端的权限字段，必须把后端校验作为安全的最后防线。

下面是具体的解决方案，分三个层面来处理：

1. 后端接口强制校验权限（最关键） #

不管前端传什么权限信息，后端都要对每个需要权限的接口做独立校验：

• 每次请求时，后端从自己的可信数据源（比如数据库、Redis缓存）中获取当前用户的真实权限，绝对不要信任前端传递的PERMISSION字段。
• 对于路由级别的权限（比如/administration），可以在后端网关或路由拦截器里统一校验；对于接口级别的权限，在具体接口逻辑中判断。
• 如果使用JWT作为身份凭证，不要把敏感权限信息放在JWT的payload里（payload是明文可解码的）；即使放了，后端必须验证JWT的签名是否有效，并且每次接口请求都要重新从数据库拉取最新权限（避免用户权限变更后，前端缓存的旧JWT仍生效）。

2. 限制Redux开发者工具的修改（辅助优化） #

虽然不能彻底阻止用户篡改前端状态，但可以在生产环境限制Redux DevTools的功能，降低被篡改的风险：

• 在生产环境直接禁用Redux DevTools：

// 创建Redux Store的代码
import { createStore } from 'redux';

const store = createStore(
  rootReducer,
  // 仅在开发环境启用DevTools
  process.env.NODE_ENV === 'development' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

• 如果需要在生产环境保留DevTools用于调试，可以限制其对权限相关状态的修改：

const store = createStore(
  rootReducer,
  process.env.NODE_ENV === 'development' ?
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
      actionsDenylist: ['UPDATE_PERMISSIONS'], // 禁止触发修改权限的action
      serialize: {
        replacer: (key, value) => {
          // 序列化时隐藏权限字段，避免在DevTools中暴露
          return key === 'permissions' ? '[REDACTED]' : value;
        }
      }
    }) :
    undefined
);

3. 优化前端授权组件的逻辑 #

修改你的AuthorizedComponent，让它的授权逻辑更健壮，同时明确前端授权只是用户体验优化，而非安全保障：

class AuthorizedComponent extends Component {
  state = {
    hasPermission: false,
    isLoading: true
  };

  // 调用后端接口校验当前用户是否拥有目标权限
  checkPermission = async () => {
    try {
      const response = await fetch('/api/check-permission', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${this.props.user.authToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ requiredPermission: this.props.requiredPermission })
      });
      return response.ok;
    } catch (error) {
      console.error('权限校验失败:', error);
      return false;
    }
  };

  componentDidMount() {
    this.checkPermission().then(hasPermission => {
      this.setState({ hasPermission, isLoading: false });
    });
  }

  render() {
    const { user, component: WrappedComponent, location } = this.props;
    const { hasPermission, isLoading } = this.state;

    // 加载状态下显示占位
    if (isLoading) return <div>加载中...</div>;

    // 前端基础判断（提升体验），但最终权限以后端校验为准
    if (!user || !user.authToken) {
      return <Redirect to={{ pathname: '/login', state: { from: location } }} />;
    }

    return hasPermission ? (
      <WrappedComponent {...this.props} />
    ) : (
      <AccessDeniedComponent />
    );
  }
}

同时简化App.js的传参，让组件根据路由自动匹配需要的权限：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <AuthorizedComponent 
            path="/administration" 
            requiredPermission="PERMISSION" 
            component={AdministrationPage} 
          />
        </Switch>
      </BrowserRouter>
    );
  }
}

最后再强调一遍：前端授权只是用来优化用户体验（比如提前跳转、隐藏无权限菜单），真正的安全必须依赖后端的每一次请求校验，即使用户篡改了前端状态，后端也能拦截非法请求，避免数据泄露或非法操作。

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