开发者问题收集

NextAuth 提供程序组件

2021-07-29
563

在 NextAuth 的官方文档中,他们说要以这种方式使用 Provider 包装组件:

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

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

如果我也以这种方式包装 Layout 和 Head,会有什么问题吗?

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

1个回答

不,这没有任何问题。 会话提供程序应该正常工作。

Provider 组件中的每个子组件都应该有权访问 session 。 提供程序在后台使用 React Context,如 docs 中所述。 有关更多信息,请查看 React Context Provider

honzanemecek
2021-10-14