javascript - react-router-dom：如何进行异步调用来决定渲染组件？

Question

我有一个将 access_token 发送到验证端点的 isAuthenticated 方法。如果响应有错误，我将 refresh_token 发送到刷新端点，每当我获得新的访问令牌时，我将其保存在 localStorage 中并...

这个方法是异步的，我用它来决定是否渲染一个组件。

const AuthenticatedRoute = ({ children, ...rest }) => {
    const auth = useContext(AuthContext);
    return (
        <Route
            {...rest}
            **render={() => {
                return auth.isAuthenticated() ? (**
                    <>{children}</>
                ) : (
                    <Redirect to="/login" />
                );
            }}
        ></Route>
    );
};

我不能给渲染方法一个异步方法。我完全不知道如何处理这种情况。也许我的策略是错误的。我可以以某种方式使用 isAuthenticated 来决定在此策略中呈现组件吗？

标签： javascriptreactjsasync-awaitreact-router-dom

Answer 1

我认为。在 useEffect 中运行异步方法以更改状态

const AuthenticatedRoute = ({ children, ...rest }) => {
    const auth = useContext(AuthContext);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    
    useEffect(() => {
       setIsAuthenticated(auth.isAuthenticated())
    },[auth])
    
    return (
        <Route
            {...rest}
                render={() => {
                return isAuthenticated ? (
                    <>{children}</>
                ) : (
                    <Redirect to="/login" />
                );
            }}
        ></Route>
    );
};