React JS异步函数返回Promise pending问题求助

你没法直接把异步操作的结果同步赋值给变量v，因为confirmToken()返回的是Promise，必须等它resolve才能拿到布尔值。在React组件中，需要用状态管理结合useState和useEffect钩子来处理异步验证逻辑：

修改步骤 #

• 引入useState和useEffect钩子管理异步状态
• 定义状态存储Token验证结果与加载状态
• 在useEffect中执行异步验证并更新状态
• 根据最终状态值完成路由判断

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { useLocation, Navigate, Outlet } from 'react-router-dom';

const RequireAuth = ({ allowedRoles }) => {
  const location = useLocation();
  const [tokenValid, setTokenValid] = useState(null); // 初始null表示未完成验证
  const [isLoading, setIsLoading] = useState(true);

  let t, l;
  try {
    t = UseToken();
    l = UseLevel();
  } catch (error) {
    return <Navigate to="/" state={{ from: location }} replace />;
  }
  
  useEffect(() => {
    const confirmToken = async () => {
      const result = await checkToken(t);
      setTokenValid(result);
      setIsLoading(false);
    };

    confirmToken();
  }, [t]); // 依赖token值，token变化时重新验证

  // 加载状态下返回加载提示，避免渲染异常
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 验证完成后执行路由判断
  if (tokenValid && allowedRoles.includes(l)) {
    return <Outlet />;
  } else if (tokenValid) {
    return <Navigate to="/noAuthorized" state={{ from: location }} replace />;
  } else {
    return <Navigate to="/" state={{ from: location }} replace />;
  }
};

关键说明 #

1. 状态管理：用tokenValid存储最终的布尔验证结果，isLoading处理异步验证完成前的加载状态，避免组件渲染时出现不确定的逻辑判断。
2. 异步执行：在useEffect中调用异步验证函数，确保组件挂载/Token变化时触发验证，拿到结果后更新状态。
3. 逻辑修正：原代码中l in allowedRoles仅适用于对象属性判断，若allowedRoles是数组，改用allowedRoles.includes(l)才能正确判断角色是否在允许列表中。

内容的提问来源于stack exchange，提问作者Renato C.Francisco