Question

我正在为我的项目进行重新渲染。首先，在将用户重定向到登录页面之前，我要先检查Cookie。我正在使用具有这种结构的Redux Store。

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

获取用于通过登录表单登录，令牌获取用于通过 Cookie中的令牌

登录

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

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

在分派动作之前调用此函数，因此它首先呈现 LogInPage ，并在分派动作时呈现 Fetching ，并呈现 HomePage 令牌有效时再次输入。

如何确保它只呈现一次 LogInPage 和 Home 。例如，如果令牌有效（仅限HomePage），如果令牌无效（仅LogInPage）

我希望此动态路由有效，因为我希望在两种情况下都使用URL。

对不起，如果我的解释不好

Answer 1

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

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

如何确保它只呈现一次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} />

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

基本上，您的路由器将变为：

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

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

1 个答案: