Question

我已经制作了一个带有HOC组件的授权路线，但这有一个问题。

用户可以使用 redux 和反应开发者工具Chrome扩展程序更改商店，这可能会导致安全性不足。

用户可以在此开发人员工具中将权限“PERMISSION”更改为另一个单词并修改应用程序的状态。

您可以这样做，以便用户无法更改商店吗？

App.js

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

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 } }} />;
        }
    }
}

感谢您的帮助。

Answer 1

禁用react dev工具：

在index.html添加以下script：

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

禁用redux dev工具：

当您创建商店对象时，您执行了以下操作：

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

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

你必须做类似的事情：

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))

请记住，为了安全起见，最好向服务器调用请求以查看用户是否具有权限。

使用redux开发人员工具chrome扩展无法修改的经过身份验证的路由

1 个答案: