如何解决尝试根据当前会话尝试加载主应用布局的某些部分时出现SSR警告
我有一个用Next.Js构建的管理仪表板。基本上，我想做这样的事情：
- 用户从
/login路由登录 - 在处理登录时，显示加载屏幕
- 在
/路由中，如果用户存在，它将加载应用程序，或者如果用户不见了，请重定向回登录
我正在尝试这样做：
_app.js：
...
<Head>
<title>My App</title>
</Head>
<ApolloProvider>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
</ApolloProvider>
...
AppLayout.js：
...
// If there's no user and we are not in any of the session routes (login or forgot-password),redirect the user to login
useEffect(() => {
if (!(user.id) && !(router.pathname === '/login' || router.pathname === '/forgot-password')) {
Router.push('/login').then();
}
});
// While the user login process is happening,show a loading screen.
if (
isLoading ||
((user.id) && (router.pathname === '/login' || router.pathname === '/forgot-password'))
) {
return <Loading />;
}
// If the user is there,show the admin panel
if (user.id) {
return (
<>
<Sidebar />
<Layout>
<TopMenu />
{children}
</Layout>
</>
);
}
// If no user and we are in the session routes,show the session forms without the main app layout
if (router.pathname === '/login' || router.pathname === '/forgot-password') {
return <>{children}</>;
}
// For everything else,show an empty div
return <div />;
...
现在这可行。用户登录并加载应用程序。如果未登录，则无法进入该应用程序。但是用户仅在前端。以全局状态存储（由Mobx管理）。它在服务器中加载的页面与在浏览器中加载的页面不同。因此，该应用会引发如下错误：
Warning: Expected server HTML to contain a matching <section> in <section>
所以我的问题是，如何在不破坏Next.Js的情况下处理这种情况？由于我们正在处理_app.js文件，因此破坏该文件可以禁用整个应用程序的SSR，对吗？ ?
解决方法
您需要在客户端和服务器两端均可访问的地方存储某种使用的ID。
一个常见的选择是将其存储在JWT中的cookie中，并使用此令牌在两侧进行“身份验证”请求，如果登录，“身份验证”请求将返回用户详细信息，进行其他明智的重定向。 / p>
在我的应用中，我“禁用”了我的管理应用的SSR，因为不需要SEO。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。