如何在Next.js 13＆AppWrite中保护您的私人路线？-DEV365 开发者社区

介绍

在现代网络开发中，安全性至关重要，尤其是在保护身份验证障碍背后的敏感数据或功能方面。 Next.js 13是一个流行的React框架，与AppWrite（自托管的后端作为服务平台）相结合，为构建安全的Web应用程序提供了强大的解决方案。在此博客文章中，我们将使用AppWrite Authentication探索如何在Next.js 13中保护您的私人路线。通过实施这种方法，您可以确保未经身份验证的用户无法访问私人路线，从而增强了应用程序的整体安全性。让我们潜入！

了解Next.js和AppWrite

在介绍细节之前，让我们更高阶，看看下一步的js和appwrite是什么。 Next.js 13是一个强大的React框架，可为快速可扩展的Web应用程序提供服务器端渲染，静态站点生成和其他高级功能。另一方面，AppWrite是一个后端作为服务平台，简化了通用的后端任务，包括用户身份验证，数据库管理和文件存储。 Next.js 13和AppWrite的组合，使开发人员轻松创建安全应用程序。
设置Next.js和AppWrite

要开始，我们需要设置下一个项目。JS13项目并将AppWrite集成到其中。这涉及创建一个新的Next.js项目并配置AppWrite SDK。通过建立此连接，我们可以利用AppWrite在我们的Next.js应用程序中的所有功能。

npx create-next-app <appname>

运行此命令后。确保创建您的应用程序，然后使用：
将您的目录更改为您的应用程序

cd <appname>

现在，让我们通过运行以下命令安装AppWrite SDK。（您可以使用纱线或PNPM或您的任何选择）

npm install appwrite

使用该设置，现在我们可以转到将appwrite配置到我们的下一个.js应用程序的下一部分。打开您的代码编辑器›

##与Next.js配置AppWrite

现在，我们在应用程序中已经有了AppWrite，现在是时候使用它具有最佳潜力了。这是我喜欢的文件夹结构，用于管理我正在使用的AppWrite服务。

因此，首先让我们在AppWrite文件夹上使用。在您的src文件夹中，制作了一个名为appwrite的新文件夹并制作一个appwrite.ts文件。在这里，我们可以管理API使用AppWrite的不同服务，包括身份验证，数据库，存储等。

为了本教程，我将仅显示AppWrite的身份验证部分，以保持清洁。现在，在您的appwrite.ts文件复制中并粘贴此代码，让我们了解它在做什么。

import { LoginInterface, RegisterInterface } from "@/interfaces/auth.interface";
import { Account, Client as Appwrite, ID } from "appwrite";

let api: any = {
  sdk: null,

  provider: () => {
    if (api.sdk) {
      return api.sdk;
    }
    let appwrite = new Appwrite();
    appwrite
      .setEndpoint("https://cloud.appwrite.io/v1")
      .setProject("************");
    const account = new Account(appwrite);

    api.sdk = { account };
    return api.sdk;
  },

  createAccount: (registerBody: RegisterInterface) => {
    return api
      .provider()
      .account.create(
        ID.unique(),
        registerBody.email,
        registerBody.password,
        registerBody.fullName
      );
  },

  getAccount: () => {
    let account = api.provider().account;
    return account.get();
  },

  createSession: (loginBody: LoginInterface) => {
    return api
      .provider()
      .account.createEmailSession(loginBody.email, loginBody.password);
  },

  deleteCurrentSession: () => {
    return api.provider().account.deleteSession("current");
  },
};

export default api;

在此代码中，我们创建一个api对象，在其中使用new Appwrite()实例化AppWrite，并使用appwrite.setEndpoint("koude7.setProject（“ **************”）将其连接到我们的项目）。您将从您的AppWrite帐户获得项目ID。

接下来，我们使用new Account(appwrite)访问AppWrite提供的身份验证API。

之后，我们为用户注册，登录和身份验证检查定义了不同的功能。这些功能将用于创建可以在我们的应用程序中有效使用的服务。

使用服务文件夹

现在，我们在appwrite.ts文件中定义了AUTH的不同功能，该是时候在一个地方收集我们的所有服务了！创建一个具有名称lib的新文件夹，并在其中创建services文件夹。这里创建一个auth.service.ts文件。在这里，我们将在一个地方编写我们的验证服务，以便我们很容易管理。

Now that you created let's copy and paste these code in `auth.service.ts` file.

import api from "@/appwrite/appwrite";
import { LoginInterface, RegisterInterface } from "@/interfaces/auth.interface";

export const register = async (registerBody: RegisterInterface) => {
  try {
    const user = await api.createAccount(registerBody);
  } catch (error) {
    console.error("Error occurred during registration:", error);
    throw error;
  }
};

export const login = async (loginBody: LoginInterface) => {
  try {
    const session = await api.createSession(loginBody);
    if (session) {
      const account = await api.getAccount();
      return account;
    }
  } catch (error) {
    console.error("Error occurred during login:", error);
    throw error;
  }
};

export const getSession = async () => {
  try {
    const account = await api.getAccount();
    return account;
  } catch (error) {
    console.error("Error occurred during getSession:", error);
  }
};

在此文件中，我们创建了三个服务。一个用于register，一个用于login，另一个用于Cheking会议（getSession）。请注意，我们使用了已经在appwrite.ts文件中写的函数。

登录和注册

现在我们已经设置了服务，在(auth)组路由内创建您的login和signup文件夹。它将允许我们通过布局包装验证页面，我们将检查用户是否经过身份验证。如果他在这种情况下进行了身份验证，我们将将他重定向到该应用程序的主页。

On both pages write as usual forms and use the `login` and `register` services exported from `auth.service.ts` . Now that have we created the login and register pages, it is now time to validate the user and implement the security of protected routes.

保护私人路线ðð7

现在是保护我们的私人路线的最后一部分。为了保护您的路线。将您的路线包装在(protected)之类的组中，并在该组中添加页面。但是为什么我们添加了这个小组？我们将其添加到该组的layout.tsx文件中检查用户的会话，并为未经身份验证的用户执行我们的操作，在我们的情况下，将他重定向到另一个页面。这是应该的样子：

Now let's look at the code of `layout.tsx` file to understand how it works in real. Look at the closely:

"use client";

import Logo from "@/components/Logo";
import { Toaster } from "@/components/ui/toaster";
import { useToast } from "@/components/ui/use-toast";
import { getSession } from "@/lib/services/auth.service";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";

interface Props {
  children: React.ReactNode;
}

const ProtectedLayout: React.FC<Props> = ({ children }) => {
  const router = useRouter();
  const { toast } = useToast();
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const checkSession = async () => {
      try {
        const session = await getSession();
        if (!session) {
          toast({
            variant: "destructive",
            title: "Session Expired",
          });
          router.push("/login");
          localStorage.clear();
        }
        setLoading(false);
      } catch (error) {
        router.push("/login");
        setLoading(false);
      }
    };

    checkSession();
  }, []);
  return (
    <>
      {loading ? (
        <>
          <main className="w-screen h-screen fixed flex items-center justify-center">
            <Logo className="animate-pulse" />
          </main>
        </>
      ) : (
        <>
          {children}
          <Toaster />
        </>
      )}
    </>
  );
};

export default ProtectedLayout;

让我们一起分解！为了检查用户会话，我们需要使用React Client组件。但是，如果我们为使用{children}制作其他组件的其他组件创建孔，这将允许任何儿童是服务器或客户端组件。

现在回到主要部分。当我们检查用户会话时，我们创建了一个loading状态，以显示一些用户友好的加载程序。接下来，在useEffect挂钩中，我们所有人都使用auth.service.ts文件中定义的getSession服务。检查会话后，我们可以做我们想对经过身份验证和未经身份验证的用户进行的任何操作。就我而言，对于经过身份验证的用户，我只是将加载状态设置为false。对于未经身份验证的用户，我执行了一些操作，并将其重定向回到身上。

同样，您可以检查(auth)组中的用户会话，并将用户重定向到仪表板/主页，如果用户登录。

ad tada ~~~ !!您现在可以保护您的应用程序！ ð¥ð¥ð

学习资源

如果您正在寻找如何与Next一起使用的示例。JS13带有AppWrite有效查看我在Github上的存储库。它有一些最佳实践定义。顺便说一句，恒星被赞赏ð

存储库：https://github.com/NiazMorshed2007/popwola

问题？

如果我们不了解它的任何部分，那么在评论中随意提出混乱。我很乐意提供帮助！

介绍

了解Next.js和AppWrite

设置Next.js和AppWrite

使用服务文件夹

登录和注册

保护私人路线ðð7

学习资源

问题？