Question

使用最新版本的React Router启动了一个新项目。

我的路由包含Auth组件。

    <Route exact path="/" render={ (props) => (
      <Auth loggedIn={this.state.loggedIn}>
        <Dashboard {...props} deletePage={this.deletePage} pages={this.state.pages} />
      </Auth>
    )} />

App容器然后将loggedIn的状态发送到Auth组件：

class Auth extends Component {
  constructor(props) {
    super(props)
    console.log(this.props.loggedIn)
  }

  componentDidMount(){
    return !this.props.loggedIn ? window.location.replace('/admin/login') : null
  }

  render() {
    return (
      <div>
       {this.props.loggedIn ? this.props.children : null}
      </div>
    )
  }
}

但是在React Dev工具中，我可以轻松地将状态更改为true并拥有对该站点的完全访问权限。处理这个问题的最佳方法是什么？

Answer 1

那么，安全性不是客户关注的问题，这就是数据层应该做的事情。

即使有人打开控制台设置isLoggedIn = true，服务器也不应允许他做任何事情。

顺便说一下，好的方式（在我看来）是提供异步服务器端资源授权：询问服务器当前用户能够做什么......

React路由器有中间件，因此，这很容易实现。

保护反应路由器4路由

1 个答案: