如何在渲染主页之前验证令牌

Question

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

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

抓取是通过登录表单登录，令牌抓取是通过cookie中的Token登录

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

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

该函数在分派操作之前调用，因此它首先渲染LogInPage，并在分派操作时获取，并在令牌有效时再次渲染HomePage 。

我如何确保它只呈现LogInPage和HomePage一次。例如，如果令牌有效（仅限主页），如果令牌无效（仅限登录页面）

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

抱歉，如果我的解释不好

Answer 1

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

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

2. 我如何确保它只呈现 LogInPage 和 HomePage 一次。

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

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

您可以Redirect从以下位置获取该组件react-router-dom：

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

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

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

3. 恕我直言，您应该更改验证工作流程的方式，因为将来扩展并不好。看看这个：react-router auth-worflow 示例

基本上，你的路由器会变成这样：

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