Reactjs 无法使用redux developer tools chrome扩展修改的已验证路由

我用一个HOC组件创建了一个授权路由，但这有一个问题

用户可以使用开发者工具的chrome扩展来更改商店，这可能会导致缺乏安全性

用户可以在此开发者工具浏览器中将权限“permission”更改为另一个单词，并修改应用程序的状态

您是否可以这样做，以便用户无法更改存储

App.js

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

类应用程序扩展组件{
render（）{
报税表（
);
}
}

AuthorizedComponent.js

class AuthorizedComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { user } = this.props;
        const  WrappedComponent  = this.props.component;

        if (user && user.authToken && user.permissions === "PERMISSION") {
            return <WrappedComponent {...this.props} />;
        }else if (user && user.authToken && !this.accessControl.hasPermission) {
            return <AccessDeniedComponent></AccessDeniedComponent>
        } else {
            return <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />;
        }
    }
}

class AuthorizedComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{user}=this.props；
const WrappedComponent=this.props.component；
if（user&&user.authToken&&user.permissions==“PERMISSION”）{
返回；
}else if（user&&user.authToken&&！this.accessControl.hasPermission）{
返回
}否则{
返回；
}
}
}

---

感谢您的帮助。

禁用react开发工具：

在

index.html

中添加以下

script

：

<script>
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

使用

process

环境变量将其更改为生产变量，以便用户无法在redux开发人员工具中操作数据

你必须做一些类似的事情：

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk))

let store = null
if (process.env.NODE_ENV !== "production") 
    store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk))
else 
    store = createStore(reducer, applyMiddleware(thunk))

---

请记住，出于安全考虑，最好向服务器发出请求，查看用户是否有权限。

感谢您的帮助，这非常适合于chrome扩展的redux开发工具，但我对chrome扩展开发工具也有同样的问题。在Chrome开发工具中。用户可以更改应用程序的身份并修改其状态。你对此有什么想法吗？再次非常感谢。停用redux和react开发工具，你的答案正确吗？我测试并使用了这两种工具。你让我大开眼界！你的解决方案正是我所需要的。现在我只有一个问题，我想在开发中显示REACT\u DEVTOOLS，但不在生产和窗口中显示。有什么想法吗？你可以试试类似的

if（window.location.hostname！==“localhost”）window.\uu REACT\u DEVTOOLS\u GLOBAL\u HOOK\uu.inject=function（）{}