授权完成后反应受保护的路由不会重定向到子节点

Question

我正在尝试在受保护的路由中添加一层身份验证，并且我一直在使用以下方法进行此操作：

function ProtectedRoute ({ children }) {
    const { user } = useContext(AuthContext);
    
    return user.isVerifying ? (
        <p>Is loading...</p>
    ) : user.verified ? children : <Navigate to="/login" />;
}

export default ProtectedRoute;

我的用户上下文使用以下信息初始化：

{
    "user": null,
    "verified": false,
    "isVerifying": false
}

目前，用户授权状态由我的AuthContext.Provider内部的一个函数（ authUser ）检查，该函数目前在我的组件的每个渲染上运行（如下所示）。 这是一个异步函数，它进行 API 调用以检查存储在 localStorage 中的用户 JWT 令牌是否有效。

import React, { createContext, useEffect, useState } from 'react';
import axios from 'axios';

const AuthContext = createContext();

function AuthProvider({children}) {
    const [user, setUser] = useState({
        "user": null,
        "verified": false,
        "isVerifying": true
    });

    async function authUser() {
        const userLocal = localStorage.getItem('user');

        if (userLocal) {
            const userLocalJSON = JSON.parse(userLocal);
            const verifyResponse = await verifyToken(userLocalJSON);

            if (verifyResponse) {
                setUser({"user": userLocalJSON, "verified": true, "isVerifying": false});
            } else {
                setUser({"user": userLocalJSON, "verified": false, "isVerifying": false});
            }
        }
    }

    async function verifyToken(userJSON) {
        try {
            setUser({"user": null, "verified": false, "isVerifying": true});

            // Make API call

            if (response.status === 200) {
                return true;
            } else {
                return false;
            }
        } catch (e) {
            return false;
        }
    }

    useEffect(() => {
        authUser();
    }, [])

    return (
        <AuthContext.Provider value={{user, authUser}}>
            {children}
        </AuthContext.Provider>
    )
}

export default AuthContext;
export { AuthProvider };

验证令牌后，用户上下文将更新为verified = true并包含有关用户的信息。 在此过程中，用户上下文isVerifying = true （相当于isLoading ）并在 API 调用完成后设置回 false。

现在有几个问题：

1. 在每次重新渲染 DOM 时，上下文信息都会设置回其默认值。 有没有办法让useEffect()只在 localStorage 更改时触发？ 我尝试实现以下解决方案，该解决方案向 localStorage 添加了一个侦听器，然后在发生更改时触发 useEffect。 我无法在 localStorage 更改时触发它。 也许我做错了什么（见下文）？

    useEffect(() => { window.addEventListener('storage', authUser) return () => { window.removeEventListener('storage', authUser) } }, [])

2. 因为初始isVerifying = false并且在 DOM 呈现之前不会切换到 true，所以受保护的路由导航到登录页面。 即使最终设置了用户上下文，它仍保留在登录页面上。 加载页面永远不会显示，而是会立即重定向到登录页面。 不幸的是，我最初无法设置isVerifying = true ，因为未登录的用户卡在加载页面上。

任何建议都会非常有帮助。

Answer 1

要解决问题 2：

您的三元组并没有完全按照您的意愿行事。 这有点像说“如果 user.isVerifying或<\/strong>!user.verified，则导航”。 这不是我们想要的。

嵌入式三元组可能很棘手，如果可以的话，我通常会尽量避免使用它们。 由于这个组件非常小，实际上您根本不需要使用三元组来执行此操作。 我认为这应该有效：

设置isVerifying<\/code>以开始true<\/code> 。 然后：

function ProtectedRoute ({ children }) {
    const { user } = useContext(AuthContext);

    if (user.isVerifying) {
        return <p>Is loading...</p>
    }

    if (user.verified === false) {
        return <Navigate to="/login" />
    }

    return children

}

export default ProtectedRoute;