Question

您好，我正在尝试创建私有路线

PrivateRoute.js

const PrivateRoute = ({ children, ...rest }) => {
    return (
        <Route
            {...rest}
            render={({ location }) =>
                Authenticate() ? (
                    children
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: { from: location },
                        }}
                    />
                )
            }
        />
    );
};
export default PrivateRoute;

当我请求私有路由时，子组件将呈现，并在一段时间后完成Autheticate函数。在Authenticate函数中，我请求返回令牌数据并将其保存在sessionStorage中

Authenticate.js

const Authenticate = async () => {
    let token = localStorage.getItem("token");

    if (token) {
        token = "Bearer " + token;

        let response = await tokenRequest(token);
        if (response) {
            if (response.status === 200) {
                await sessionStorage.setItem(
                    "userData",
                    JSON.stringify(response.data.token)
                );
                return true;
            } else {
                localStorage.clear();
                sessionStorage.clear();
                return false;
            }
        } else {
            return false;
        }
    } else {
        localStorage.clear();

        return false;
    }
};

export default Authenticate;

如何完成功能的任务，然后重定向到子组件？

Answer 1

在您的登录路径内，您可以在用户登录后使用在重定向中设置的历史api状态来导航回去。该状态存储在react router dom的location变量中。 https://reacttraining.com/react-router/web/api/location

除此之外，您的Authenticate函数当前返回布尔值的Promise。承诺永远是真实的，因此您的重定向可能永远不会运行。

关于如何使PrivateRoute与异步检查一起工作的逻辑，我将向您介绍这是由于类似的问题：authorized route vs unauthorized routes reactjs not properly loading

异步条件之前的ReactJS渲染组件

1 个答案: