next.js 我如何在接下来的13年中创建受保护或私有路由

gajydyqb  于 2023-11-18  发布在  其他
关注(0)|答案(2)|浏览(67)

我是新来的下13。我在应用程序中创建的页面。像关于,联系人, Jmeter 板。
在dashboard中我有(auth)。如果用户有令牌,他可以访问dashboard,否则他将被重定向到登录页面。
我如何在接下来的13中做到这一点。在React js中很容易


的数据

bwitn5fc

bwitn5fc1#

您可以遵循一些替代方案,例如,一旦使用API调用进行签名,您将收到返回的令牌,您将其存储在本地存储中,然后在您希望用户登录的每个页面的useEffect中查看它,您检查令牌是否不存在,因此将其重定向到登录页面。
在nextjs中处理用户身份验证的最受保护的方法是使用Next-auth库。
这个想法是为每个使用Next-auth登录的用户创建一个会话。在您的情况下,您使用的是nodejs后端,您希望使用凭据提供程序使用Next-auth登录。此提供程序允许您根据传递给signIn方法的值创建会话,因此您可以使用这些值(电子邮件、密码)对您的后端进行API调用,并接收回用户信息+访问令牌,并将它们存储在会话中。
有几个options你可以把你的authOptions对象,你从[...nextauth].js文件导出.
你可以在Next.js 13 App Directory中找到here这篇非常有趣的教程,详细解释了如何设置和使用NextAuth。

kjthegm6

kjthegm62#

您可以使用next-auth,因为您可能已经知道您的问题带有next-auth。按照docs中的描述设置next-auth。对于服务器页面,您可以使用getServerSession。
你的app/dashboard/page.jsx可能看起来像这样:

import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { redirect } from "next/navigation";

export default async function Show({ params }) {
    const session = await getServerSession(authOptions);
    if (!session) {
        redirect("path/to/loginpage");
    }
    return (
        <main>
            {/* replace this by the content you want to display */}
            You're logged in as {session.user.name}.
        </main>
    );
}

字符串

相关问题