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可以被填充，即使loading是true。

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

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

tl;dr

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

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