反应 - 如何等到 api 调用完成加载路径？

Question

如果用户有权访问应用程序，我使用 axios post 向后端请求。问题是 axios 返回 undefined 然后 true 或 false 。如果返回 true 或 false（在这种情况下为 undefined = false），有一个私有 Route 来管理要做什么，是 axios 的问题还是有其他方法？比如等到返回真假

IsLogin.jsx

import React from 'react'
const axios = require('axios');
export const AuthContext = React.createContext({})

export default function Islogin({ children }) {
   const isAuthenticated =()=>{
       try{
            axios.post('/api/auth').then(response => {
               var res = response.data.result;
               console.log(res)
               return res
           })
       } catch (error) {
           console.error(error);
           return false
       }

   }
  
   var auth = isAuthenticated()
   console.log(auth);
   return (
       <AuthContext.Provider value={{auth}}>
           {children}
       </AuthContext.Provider>
   )
}

privateRoute.js

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import  {AuthContext}  from '../utils/IsLogin';

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

   const {isAuthenticated}  = useContext(AuthContext)
   
   return (

       // Show the component only when the user is logged in
       // Otherwise, redirect the user to /unauth page
       <Route {...rest} render={props => (
           isAuthenticated ?
               <Component {...props} />
           : <Redirect to="/unauth" />
       )} />
   );
};
export default PrivateRoute; 

app.js

class App extends Component {
  render() {
  return (
    <>
    <BrowserRouter>
    <Islogin>
      <Header/>
    <Banner/>
     <Switch>
      <PrivateRoute exact path="/index" component={Landing} />
     <PrivateRoute path="/upload" component={Upload} exact />
     <PublicRoute restricted={false} path="/unauth" component={Unauthorized} exact  />
    </Switch>
    </Islogin>
    </BrowserRouter>
  
    </>
  );
}
}

Answer 1

您不想在发布请求中返回任何内容。你应该更新你的上下文存储

const isAuthenticated = () => {
    try {
        axios.post('/api/auth').then(response => {
            var res = response.data.result;
            console.log(res)
            // update your context here instead of returning
            return res
        })
    } catch (error) {
        console.error(error);
        return false
    }
}

在您的私有路由中，使用 componentDidUpdate 样式 useEffect 挂钩来检查身份验证状态的变化并根据需要更新内部标志

const PrivateRoute = ({ component: Component, ...rest }) => {
    const { isAuthenticated } = useContext(AuthContext)
    const [validCredentials, setValidCredentials] = React.useState(false)

    React.useEffect(() => {
        if (typeof isAuthenticated === 'boolean') {
            setValidCredentials(isAuthenticated)
        }
    }, [isAuthenticated])


    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /unauth page
        <Route {...rest} render={props => (
            validCredentials ?
                <Component {...props} />
                : <Redirect to="/unauth" />
        )} />
    );
};

Answer 2

我很好奇你为什么不使用“异步等待”，哈哈。

您正在向端点“/api/auth”发出发布请求，但您没有给它任何要发布的数据，例如：

try{
       axios.post('/api/auth',{username,password}).then(response => {
           var res = response.data.result;
           console.log(res)
           return res
       })
       } catch (error) {
           console.error(error);
           return false
       }