ReactJs，如何等待我的函数返回一些东西

Question

我有一个函数调用isAuthenticated，可以像这样检查令牌的有效性：

isAuthenticated = async () => {

        const data = await request.call({

            url: `http://localhost:1337/utilisateurs/VerifyUserTok`,

            method: `post`,

            parameters : {

                authorization: `bearer ${sessionStorage.getItem(`token`)}`

            }

        });

        if (data.IsValide){

            return true;

        } else {

            return false;

        }

    }

在我受保护的路由中，如果上一个函数返回 false，我不会重定向该人。但是在 protected.route.js 文件中，该函数在第一次返回时进入，而无需等待我的 isAuthenticated 函数返回一些内容：

import React from 'react';

import { Route, Redirect } from 'react-router-dom';

import auth from './auth.js'

import NavMenu from './NavMenu';

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

    return (

        <Route 

            {...rest} 

            render = {props => {

                if(auth.isAuthenticated()){

                    return <div className="page-body">

                                <Route>

                                    <NavMenu/>

                                    <div className="right-body">

                                        <Component {...props}/>

                                    </div>

                                </Route>

                            </div>

                } else {

                    return <Redirect to={

                        {

                            pathname: "/",

                            state: {

                                from: props.location

                            }

                        }     

                    } />

                }

            }}

        />

    );

}

Answer 1

您将需要一些状态来保存您要查找的信息，并且您需要在效果中执行身份验证查找。当然，您可以选择在身份验证检查进行时以某种方式显示加载指示器，但您可以根据需要找出该机制。import React, { useState, useEffect } from 'react';import { Route, Redirect } from 'react-router-dom';import auth from './auth.js'import NavMenu from './NavMenu';export const ProtectedRoute = ({ component: Component, ...rest }) => {&nbsp; &nbsp; const [isAuthed, setIsAuthed] = useState(false);&nbsp; &nbsp; const [isLoaded, setIsLoaded] = useState(false);&nbsp; &nbsp; // Assuming you just want to check on initial render&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; let mounted = true;&nbsp; &nbsp; &nbsp; const checkAuth = async () => {&nbsp; &nbsp; &nbsp; &nbsp; const authed = await auth.isAuthenticated();&nbsp; &nbsp; &nbsp; &nbsp; if (mounted) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setIsAuthed(authed);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setIsLoaded(true);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; checkAuth();&nbsp; &nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; &nbsp; mounted = false;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, [])&nbsp; &nbsp; return !isLoaded ? "Loading..." : (&nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...rest}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render = {props => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isAuthed){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div className="page-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <NavMenu/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="right-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Component {...props}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <Redirect to={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pathname: "/",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from: props.location&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );}

Answer 2

您可以为结果处理三种不同的状态。未定义，真实和虚假。isAuthenticated()未定义：您的组件将显示一个加载程序，等待您的API调用结束真/假：与你的行为相同。只需将其存储在变量中并执行类似操作即可：// ... Ommited codeif(isAuthed === undefined) return <Loader />;return (// ... Your code with true/false condition