保护React Router 4路由

Question

使用最新版本的React Router开始了一个新项目。

我有使用Auth组件包装的路由。

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

然后，应用容器将登录状态发送到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 Router具有中间件，因此，这真的很容易实现。