如何在未来 13 年内创建受保护或私有路线

Question

我是下一个 13 的新手。我在应用程序中创建了页面。例如“关于”、“联系人”、“仪表板”。
在仪表板中我有（auth）。如果用户有令牌，他可以访问仪表板，否则他将被重定向到登录页面。

我该如何在接下来的 13 中做到这一点。在 React js 中这很容易

Answer 1

您可以遵循一些替代方案，例如，一旦用户调用 API 进行签名，您就会收到令牌，并将其存储在本地存储中，然后在每个页面的

useEffect

内您希望用户登录才能看到它，您检查令牌是否不存在，以便将其重定向到登录页面。

在 nextjs 中处理用户身份验证的最受保护的方法是使用 Next-auth 库
，其想法是为使用 Next-auth 登录的每个用户创建一个会话。在您的情况下，您使用的是nodejs后端，您希望使用凭证提供程序通过下一个身份验证登录。该提供程序允许您根据传递给 signIn 方法的值创建会话，以便您可以使用这些值（电子邮件、密码）对后端进行 API 调用，并接收用户信息 + 访问令牌并存储它们在会话中。
有几个选项，您可以放入从

authOptions

文件导出的

[...nextauth].js

对象中。

您可以在这里找到一个非常有趣的教程，详细解释如何在 Next.js 13 应用程序目录中设置和使用 NextAuth

Answer 2

您可以使用 next-auth，您可能已经知道，因为您用 next-auth 标记了您的问题。 按照docs中的描述设置下一个身份验证。对于服务器页面，您可以使用 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);
    {/* Since this is server side component you don't need if 
     else, just this. */}
    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>
    );
}