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

Question

我正在创建一个私有路由，用于在允许用户访问特定页面之前检查用户是否经过身份验证。问题是没有调用 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 函数。现在的问题是，甚至在身份验证检查发送响应之前，用户就被重定向到登录。

Answer 1

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

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>
      );