8

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

4

1 回答 1

7

该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那么他们肯定没有活动会话。

于 2020-07-31T12:24:45.963 回答