如何正确等待此axios.get请求？

Question

很抱歉，如果这是我忽略的非常简单的事情，但我正在尝试制作一个组件，它基本上只将某些react路由器路由限制为具有活动令牌的用户。

import Axios from "axios";
import React, {useState, useEffect, useSelector} from 'react';
import {Route, Redirect} from 'react-router-dom';

function isLogin(){
    const result = Axios.get('http://localhost:8081/authentication', {withCredentials: true})
    .then(res => {
        console.log(res);
    })
    console.log(result);
}

const PrivateRoute = ({component: Component, ...rest}) => {

    return (
        <Route {...rest} render={props => (
            isLogin() ?
                <Component {...props} />
            : <Redirect to="/login" />
        )} />
    );
};

export default PrivateRoute;

看起来（正如预期的那样）只有“console.log（result）”执行了挂起的promise，但在最终结果中，我试图将一些逻辑编码到从后端给出的响应中（true或false），然后这些逻辑应该发送到privaterout组件，以确定是否应该将用户发送回登录，等等。。

我知道这是因为axios.get的异步特性导致了我的问题，但我尝试了几种不同的方法：

使isLogin函数异步，然后等待axios请求

在PrivateRoute返回中创建另一个异步函数，使用wait。

似乎无论我在这里尝试什么，都没有正确地等待axios.get的结果，因此没有给出不想要的结果。。如果您有任何建议，甚至是正确的方向，我都将不胜感激。

非常感谢。

Answer 1

我已经提出了处理这种情况的要点。

你需要两个州。

• 已认证
• 正在加载

您将拥有一个对用户进行身份验证的函数，但在进行身份验证时还需要加载状态。

所以你会有这样的东西

return (
    <Route
        {...rest}
        render={props => (
            !isLoading
                ?
                (
                    isAuthenticated
                        ?
                        <Component {...props} />
                        :
                        <Redirect to="/login" />
                )
                :
                <Loading />
        )}
    />
)

你会有一个函数来设置这些状态

useEffect(() => {
    setIsLoading(true)
    isLogin()
        .then(() => {
            setIsAuthenticated(true)
        })
        .catch(() => {
            setIsAuthenticated(false)
        })
        .then(() => {
            setIsLoading(false)
        })
}, [])

Answer 2

正如@Emile Bergeron在评论（参考）中所说，我将在私有路由组件中添加一个状态，该状态将存储用户是否经过身份验证。这将在组件（私有路由）首次挂载时检查。

作为一个代码，以您的代码为基础，它看起来像这样：

import Axios from "axios";
import React, {useState, useEffect, useSelector} from 'react';
import {Route, Redirect} from 'react-router-dom';

const PrivateRoute = ({component: Component, ...rest}) => {
    // State
    const [authenticated, setAuthentication] = useState(null);
    const [loadingComplete, setLoadingComplete] = useState(false);
    // Login function
    useEffect(
        () => {
            // ComponentDidMount
            // Declare Function (you can also declare it outside the useEffect, 
            //    if you want to run it also if another prop changes for instance.
            //    But it will be overwritten on every rerender; 
            //    To prevent this you could use useCallback hook)
            const isLogin = async () => {
                try {
                    const result = await Axios.get('http://localhost:8081/authentication', {withCredentials: true});
                    // Store the result, e.g. ID, token, ...
                    setAuthentication(result);
                } catch (e) {
                    // Something failed
                    console.log(e);
                }
                setLoadingComplete(true);
            }   
            // run login function
            isLogin();
        },
        []
    );
    if(loadingComplete){
        return (
            <Route {...rest} render={props => (
                !!authenticated ?
                    <Component {...props} />
                : <Redirect to="/login" />
            )} />
        );
    }else{
        return ( <div> Loading... </div>);
    }
};

export default PrivateRoute;

编辑：当然，您还需要加载过程的状态，因此重定向不会在读取用户之前击中您。