未在Route的渲染部分中调用函数

如何解决未在Route的渲染部分中调用函数

我正在创建一条专用路由，用于在允许用户访问特定页面之前检查用户是否已通过身份验证。问题是没有调用checkCredentials（）函数。我对React（和Javascript）还是很陌生，所以我想知道为什么会这样。

此外，Route渲染器根据doc引入了一个函数，但它们不是用大括号括起来，而是放在括号中。这是React的事吗？

 render={(props) => (
            checkCredentials() ? <Component {...props}/> : (<Redirect to='/login'></Redirect>)
          )}

代码如下：

 async function checkCredentials() {
      // try {
      //   const result = axios.post('http://localhost:5000/api/auth/check',{withCredentials:  true});
      //   if (result.data.status === 200) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // } catch(error) {
      //   return false;
      // }
      return false;
    }
    function PrivateRoute({component: Component,...rest}) {
      return(
          <Route {...rest} render={(props) => (
            checkCredentials() ? <Component {...props}/> : (<Redirect to='/login'></Redirect>)
          )}></Route>
      ); 
    }

更新： 现在，这是私人路线的样子：

function PrivateRoute({component: Component,...rest}) {
  
  const [auth,setAuth] = useState(false);

  useEffect(() => {
    checkCredentials();
  },[]);

  async function checkCredentials() {
    try {
      const result = await axios.post('http://localhost:5000/api/auth/check',{withCredentials:  true});
      if (result.data.status === 200) {
        setAuth(true);
      } else {
        setAuth(false);
      }
    } catch(error) {
      setAuth(false);
    }
  }

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

现在正在调用checkCredentials函数。现在的问题是，即使在auth检查发送响应之前，用户也已被重定向到登录名。

解决方法

您正试图在render中的React函数上执行异步调用，这不起作用。

1. 使用状态检查重定向。
2. 在安装组件时执行auth check。
3. 更新状态并相应地渲染组件。

最好的方法是从服务器获取token并将其存储在localStorage（浏览器）中，并通过解码token

来检查权限。

这样的事情就足够了：-

 const [redirect,setRedirect] = React.useState(null);
 async function checkCredentials() {
      try {
        const result = axios.post('http://localhost:5000/api/auth/check',{withCredentials:  true});
        if (result.data.status === 200) {
          setRedirect(true)
          
        } else {
          setRedirect(false)
        }
      } catch(error) {
          setRedirect(false)
      }
    }
    if (redirect === null) return null;
      return(
          <Route {...rest} render={(props) => (
            redirect ? <Component {...props}/> : (<Redirect to='/login'></Redirect>)
          )}></Route>
      );