NextAuth 提供者组件答案

【问题标题】：NextAuth Provider componentNextAuth 提供者组件
【发布时间】：2021-10-05 02:25:02
【问题描述】：

在 NextAuth 的官方文档中，他们说用 Provider 包装组件是这样的：

`
 import { Provider } from "next-auth/client"

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

如果我也以这种方式包装布局和头部有什么问题吗？

function MyApp({ Component, pageProps }) {
 // Use the layout defined at the page level, if avaiable (in my case for the QeAs)
 const getQeAsLayout = Component.getQeAsLayout || ((page) => page);
 return (
    <Provider session={pageProps.session}>
     <Head>
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     </Head>

     <ThemeProvider theme={brandTheme}>
       <Layout>{getQeAsLayout(<Component {...pageProps} />)}</Layout>
     </ThemeProvider>
    </Provider>
  );
}

请不要考虑关于 getQeAsLayout 的那一行

【问题讨论】：

标签： reactjs next.js next-auth

【解决方案1】：

不，这没有任何问题。 Session Provider 应该可以正常工作。

Provider 组件中的每个孩子都应该有权访问session。如docs 中所述，提供者在后台使用 React Context。查看React Context Provider了解更多信息。

【讨论】：