next-auth 中 useSession() 的“加载”返回值是啥？

Posted 2023-03-06

【中文标题】next-auth 中 useSession() 的“加载”返回值是啥？

【英文标题】：What is the 'loading' return value from useSession() in next-auth?next-auth 中 useSession() 的“加载”返回值是什么？

【发布时间】：2020-10-29 11:35:46

【问题描述】：

我正在编写一个 Next.js 项目，并使用 GitHub 和 next-auth 实现身份验证。在next-auth 的示例中，有一个对useSession() 的调用，它返回两个对象：session 和loading。但是，我看到的所有示例都没有真正使用loading 对象。

import React from 'react'
import  
  useSession, 
  signin, 
  signout 
 from 'next-auth/client'

export default () => 
  const [ session, loading ] = useSession()

  return <p>
    !session && <>
      Not signed in <br/>
      <button onClick=signin>Sign in</button>
    </>
    session && <>
      Signed in as session.user.email <br/>
      <button onClick=signout>Sign out</button>
    </>
  </p>

问题：loading的用途是什么，在实践中是如何使用的？

【参考方案1】：

loading 选项表示会话状态正在更新；获取会话数据时为true，完成检查时为false。

这有点复杂，因为 session 属性即使在加载时也可以被填充（例如，因为它已经有一个可以从以前的调用中使用的缓存值），所以从技术上讲，session 即使在 @987654326 时也可以填充@ 是true。

如果在 pages/_app.js 中使用 NextAuth.js 提供程序，如果在 getInitialProps() 或 getServerSideProps() 中调用了 getSession()，则还可以填充从 useSession 返回的 session 对象。

如果您有一个活动会话，诸如窗口获得或失去焦点之类的操作将导致 NextAuth.js 在后台再次检查会话状态，以尝试确保它不是陈旧的。

tl;博士

当您检查loading 时，您可能还想首先检查session 不是null。如果session 状态是一个对象，则用户有一个有效的会话，您无需等待loading 返回。

但是，如果 session 是 null 并且 loading 是 false 那么他们肯定没有活动会话。

【讨论】：

在调用signIn() 之后，我期待loading 成为true。我想用它在登录提交按钮上显示一个微调器，而signIn() 做了它的事情。 但我必须知道signIn()（还有singOut()）对loading 没有任何影响。 可能我有一个严重的误解。也许有人可以为我清除迷雾..

@Tobi 我认为这是一个公平的假设！我不确定它确实如此，但它似乎是完全合理的预期，如果它没有发生，我认为我们可以改变它。调用 signIn() 或 signOut() 应该 更改当前会话状态，但是 - 正如你所说 - 我不确定它是否真的改变了 loading 值。