React Token Auth中useAuth()先返回false后true无跳转刷新的原因

这是react-token-auth库异步初始化逻辑导致的正常表现，不是bug，执行流程如下：

• 组件第一次渲染时，useAuth刚完成挂载，内部认证状态的同步初始值默认是false——因为此时库还没开始校验本地存储的token，所以你第一次看到控制台打印false。
• 组件挂载完成后，库会立刻在后台跑异步校验流程：
  1. 读取本地存储里你配置的access_token字段对应的凭证
  2. 如果本地存了没过期的有效token，或者token快过期时触发你写的onUpdateToken刷新逻辑拿到了新的有效token，库就会把内部的登录状态改成true
  3. React状态更新自动触发组件重渲染，就有了第二次打印的true，整个过程不需要刷新页面或者跳转路由。

避免初始值误判的处理方式 #

useAuth返回的数组第二个元素是初始化加载状态，你之前只解构了第一个登录状态值，可以把loading状态拿出来，等校验完成再做权限判断、路由跳转这类业务逻辑：

function App() {
  const navigate = useNavigate();
  // 第二个值代表认证状态是否还在初始化校验中
  const [isSignedIn, isAuthLoading] = useAuth();

  // 校验没完成时先展示加载占位，不执行业务逻辑
  if (isAuthLoading) {
    return <div>加载中...</div>
  }

  console.log('App isSignedIn: ', isSignedIn)
  // 后续业务代码
}

内容的提问来源于stack exchange，提问作者Rylan Schaeffer