我正在使用Supabase与NextJS制作一个 Jmeter 板，我面临着这样的麻烦：
每次用户进入应用程序时，Login页面都会 Flink 1秒，然后验证用户身份并重定向到内容页面。
显示问题的视频：https://user-images.githubusercontent.com/48700146/214397435-a0bb3623-2097-4fdf-80c8-982a1d77a0a2.mp4
如您所见，我没有使用Supabase登录组件。
- 布局. tsx**
interface Props {
children: React.ReactNode;
}
export default function Layout({ children }: Props) {
const supabaseSession = useSession();
return (
<>
<Head>
<title>LysiMed</title>
</Head>
{supabaseSession ? (
<Flex className={inter.className}>
<Menu />
<Box flex={1}>{children}</Box>
</Flex>
) : (
<Login />
)}
</>
);
}- _应用程序. tsx*
export default function App({
Component,
pageProps,
}: AppProps<{ initialSession: Session }>) {
const [loading, setLoading] = React.useState(false);
const [supabase] = useState(() => createBrowserSupabaseClient());
React.useEffect(() => {
const start = () => {
setLoading(true);
};
const end = () => {
setLoading(false);
};
Router.events.on("routeChangeStart", start);
Router.events.on("routeChangeComplete", end);
Router.events.on("routeChangeError", end);
return () => {
Router.events.off("routeChangeStart", start);
Router.events.off("routeChangeComplete", end);
Router.events.off("routeChangeError", end);
};
}, []);
return (
<SessionContextProvider
supabaseClient={supabase}
initialSession={pageProps.initialSession}
>
<ChakraProvider>
{loading ? (
<Loading>
<Spinner size="xl" color="green.400" />
</Loading>
) : (
<Layout>
<Component {...pageProps} />
</Layout>
)}
</ChakraProvider>
</SessionContextProvider>
);
}- 包. json**
{
"next": "13.0.7",
"@supabase/auth-helpers-nextjs": "^0.5.2",
"@supabase/auth-helpers-react": "^0.3.1",
"@supabase/supabase-js": "^2.2.3",
}我认为发生这种问题是因为useSession()是异步的，当Supabase客户机检查用户凭据时，它返回null。
解决这个问题的最好办法是什么？
1条答案
按热度按时间ma8fv8wu1#
我找到解决办法了。
与其使用钩子
useSession()-返回Session | null，不如使用useSessionContext()，返回以下接口：来源：https://github.com/supabase/auth-helpers/blob/main/packages/react/src/components/SessionContext.tsx