Reactjs If语句是在回调函数完成之前执行的，这使得react-router-dom无法重定向

现在我正试图在我的爱好项目中实现身份验证。你可以在我的电脑上找到密码。我从中得到了认证的灵感

几天来，我一直在尝试让这种身份验证在我的应用程序中使用回调并尝试异步方式。我会继续这样做。然而，我准备寻求一些帮助

protected.route.js

import React from "react";
import { Route, Redirect } from "react-router-dom";
import auth from "./auth";
import {history} from './history'

export function ProtectedRoute({component: Component, ...rest})  {
  return (
    <Route
      {...rest}
      render={props => {
        if (auth.checkAuthentication()) {
          console.log("hmmmmmmmmm true")
          return <Component {...props} />;
        } else {
          console.log("hmmmmmmmmm false")
          return (
            <Redirect
              to={{
                pathname: "/SignIn",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};

...some code...

    async checkAuthentication(){
        const token = window.localStorage.getItem(AuthTokenKey)

        console.log("checking auth")
        console.log(token)

        await axios.get('http://127.0.0.1:8000/api/user/me/', {
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Access-Control-Allow-Credentials': 'true',
                'Authorization': 'Token ' + token
            },
        })
        .then((response) => {
            if(response.status===200){
                console.log('auth check passed')
                return true
            } else {
                return false
            }
        }, (error) => {
            console.log(error);
            return false
        })
    }

...some code...

我希望

protected.route.js

中的

if

语句等待axios GET请求完成。然而，它只是不断返回true，从不重定向

if (auth.checkAuthentication()) {

因为checkAuthentication是一个异步函数，所以它返回一个promise对象。对象是“真实的”，因此该条件通过

要获得承诺的结果，您需要使用其.then方法，或使用async/await，但还有一个更大的问题：您不能在react render方法（或route render prop）中执行异步操作。您将需要一些组件状态、一些根据该状态决定渲染内容的代码，以及一些检查身份验证和更新状态的代码

例如：

export function ProtectedRoute({component: Component, ...rest})  {
  const [authentication, setAuthentication] = useState('pending');

  useEffect(() => {
    auth.checkAuthentication().then(result => setAuthentication(result));
  }, []);

  if (authentication === 'pending') {
    return null; // or some placeholder
  } else if (authentication === false) {
    return <Redirect /* props omitted for brevity */ /> 
  } else {
    return <Route {...rest} render={props => <Component {...props} />} />
  }
};

因为checkAuthentication是一个异步函数，所以它返回一个promise对象。对象是“真实的”，因此该条件通过

要获得承诺的结果，您需要使用其.then方法，或使用async/await，但还有一个更大的问题：您不能在react render方法（或route render prop）中执行异步操作。您将需要一些组件状态、一些根据该状态决定渲染内容的代码，以及一些检查身份验证和更新状态的代码

例如：

export function ProtectedRoute({component: Component, ...rest})  {
  const [authentication, setAuthentication] = useState('pending');

  useEffect(() => {
    auth.checkAuthentication().then(result => setAuthentication(result));
  }, []);

  if (authentication === 'pending') {
    return null; // or some placeholder
  } else if (authentication === false) {
    return <Redirect /* props omitted for brevity */ /> 
  } else {
    return <Route {...rest} render={props => <Component {...props} />} />
  }
};

---

谢谢你清晰的感叹！这会让我花很长时间去了解反应和承诺。为了更好地理解这些概念，我将从这个项目中休息一下，做一些阅读和小程序。谢谢你清晰的感叹！这会让我花很长时间去了解反应和承诺。为了更好地理解这些概念，我将从这个项目中休息一下，做一些阅读和小程序。