reactjs - 如何在渲染主页之前验证 token

Question

我正在努力解决项目中的重新渲染问题。首先，我在将用户重定向到登录页面之前检查 cookie。我正在使用具有这种结构的 Redux Store。

var initialState = {
    user: {
        auth: false,
        isFetching: false,
        isTokenFetching: false
    }
}

获取用于通过登录表单登录，获取 token 用于通过cookie中的 token 登录

我正在使用自定义的动态路线来使其根据此条件进行渲染。 (isFetching是指正在获取token时)

const DynamicRoute = ({isFetching,isAuthenticated, ...rest}) => {
    return isFetching ? <h1>Fetching</h1> : (
        <Route {...rest} render={(props) =>{
        return isAuthenticated ?
        <HomePage/> :
        <LogInPage/>}}/>
    )
} 

此函数在分派(dispatch)操作之前调用，因此它首先渲染 LogInPage，然后在分派(dispatch)操作时 Fetching，然后渲染 HomePage当 token 有效时再次。

如何确保它仅呈现 LogInPage 和 HomePage 一次。例如，如果 token 有效(仅限主页)，如果 token 无效(仅限登录页面)

我希望这个动态路由能够工作，因为我希望对这两种情况都使用 URL。

抱歉，如果我的解释不好

Answer 1

1. 首先，如果 isAuthenticated 为 true，我们应该将用户重定向到 HomePage，不是吗？

return isAuthenticated ? <HomePage/> : <LogInPage/>;

How can I make sure it only renders the LogInPage and HomePage once.

使用Redirect组件将用户重定向回LogInPage，如下所示:

return isAuthenticated ? <HomePage/> : <Redirect to="/login" />;

您可以从react-router-dom获取Redirect组件:

import { Redirect } from "react-router-dom";

我假设您已经像这样定义了路由器:

<Route path="/login" component={LogInPage} />

恕我直言，您应该更改验证工作流程的方式，因为这不利于将来的扩展。看看这个:react-router auth-worflow example

基本上，您的路由器将变成这样:

<Route path="/login" component={LogInPage} />
<PrivateRoute path="/home" component={HomePage} />