保護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具有中間件，因此，這真的很容易實現。