如何从 _app.js 服务器端全局访问下一个身份验证用户会话数据？

Posted 2023-03-30

【中文标题】如何从 _app.js 服务器端全局访问下一个身份验证用户会话数据？

【英文标题】：How to make next-auth User Session Data Globally accessible from _app.js server-side?

【发布时间】：2021-08-13 18:20:18

【问题描述】：

使next-auth user 中的session 数据在服务器端的所有页面中全局可访问的最佳方法是什么？

还是我需要手动将getServerSideProps 添加到每个页面以获取session user 数据？

<Provider session=pageProps.session></Provider> 在 _app.js return 函数中，所以我需要一个 hoc wrapper 组件吗？

我尝试使用getInitialProps:

function MyApp( Component, pageProps, initialLoginStatus ) 

   console.log(initialLoginStatus);

   ....

  return (

     <React.Fragment>

          <Provider session=pageProps.session>
             ...
          </Provider>

     </React.Fragment>

  )


MyApp.getInitialProps = async ( ctx ) => 

  if (typeof window === "undefined") 

    return 
      initialLoginStatus: `test`
    

   else 

    return 
      initialLoginStatus: `error`
    
  

但我收到此错误：TypeError: Cannot read property 'session' of undefined 为<Provider session=pageProps.session>

【参考方案1】：

如果您在“pages”文件夹中没有“_app.js”文件，则必须通过将其放入其中来创建一个：

import Provider from 'next-auth/client'

export default function App(Component, pageProps) 
    return (
        <Provider session=pageProps.session>
            <Component ...pageProps />
        </Provider>
    )

然后在您的页面中，您必须使用它来使用会话：

import useSession from 'next-auth/client'

&

const [session, loading] = useSession()

您可以通过以下方式获取用户名：

session.user.name

例如在您提供的代码中会给出：

import useSession from 'next-auth/client'

function MyApp( Component, pageProps, initialLoginStatus ) 

   const [session, loading] = useSession()
   
   console.log(session.user.name)
   console.log(session)

   console.log(initialLoginStatus);

   ....

  return (

     <React.Fragment>

          <Provider session=pageProps.session>
             ...
          </Provider>

     </React.Fragment>

  )


MyApp.getInitialProps = async ( ctx ) => 

  if (typeof window === "undefined") 

    return 
      initialLoginStatus: `test`
    

   else 

    return 
      initialLoginStatus: `error`
    
  

【讨论】：

问题是我得到undefined 如果我在console.log 之后得到session.user，它是undefined，但client-side await getSession(); 有效

我期待完全相同的行为。从文档中确实可以误导，但对于 _app.js 中的包装器来说还不够。您需要激活 s-s-r 并传递服务器端会话。 _app.js ... import useSession, getSession from 'next-auth/client' ... ``` // 导出 session 属性以使用带有服务器端渲染的会话 export async function getServerSideProps(context) return 道具： 会话：等待 getSession(context) ```