时间戳

首页 > 解决方案 > NextAuth 提供者组件

reactjs - NextAuth 提供者组件

问题描述

在 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 的行

标签： reactjsnext.jsnext-auth

解决方案

不，这没有任何问题。会话提供者应该可以正常工作。

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

推荐阅读