Question

所以这是我的路由器结构：

<Router>
    <div>
        <Route path="/" exact component={ Login } />
        <Route path="/timeline" component={ requireAuth(Timeline) } />
        <Route path="/chat/:id" component={ requireAuth(Chat) }/>
    </div>
</Router>

requireAuth（）是一个简单的HOC组件，可以进行API调用，并根据响应呈现<ComposedComponent {...this.props} />或<Redirect to="/" />

我面临两个问题：

每次从/ timeline到/ chat / XXX
当我从/ timeline转到/ chat / xxx时，浏览器重新加载页面。

我该如何解决这个问题？我想我应该以某种方式包裹我需要认证的路线？...

更新

所以我花了一些时间才想出这个逻辑：

ReactDOM.render((

    <div>
        <Router>
            <Switch>
                <Route exact path="/" component={Login} />
                <App>
                    <Route path="/timeline" component={Timeline} />
                    <Route path="/chat/:id" component={Chat} />
                </App>
            </Switch>
        </Router>
    </div>


), document.getElementById('root'))

我的身份验证逻辑现在位于App.js中，当我尝试打开<App></App>部分内的任何路径时，只调用一次。

Answer 1

我不会保护您的客户端组件，而是通过相同的HOC保护入口点，并找到另一种方法来保护您的应用程序的内部工作。绕过客户端限制来访问受保护的组件非常容易，因此您只能为此提供如此多的保护。

解决此问题的最常用方法是保护用于向您的后端提交数据的任何请求，并使用必须在成功提交任何数据之前验证的令牌。

React Router 4防止页面重新加载

1 个答案: