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

Question

我正在编写一个 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是什么，在实践中是如何使用的？

Answer 1

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

它有点复杂，因为session即使正在加载该属性也可以已经填充（例如，因为它已经具有可以从先前调用中使用的缓存值），因此从技术上讲，session即使在loadingis时也可以填充true。

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

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

tl;博士

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

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