使用户认证构建网站

有时，您需要创建一个带有受限内容的网站，仅限于已认证的用户。使用 Gatsby，您可以通过客户端路由的概念来实现这一点，以定义用户登录后可以查看哪些页面。

先决条件

您应该已经配置好环境，能够使用 gatsby-cli。一个很好的起点是主教程。

在生产环境中，您应该使用经过测试且可靠的解决方案来处理认证。 Auth0、Firebase 和 Passport.js 都是很好的例子。本教程仅涵盖认证流程，但您应该尽可能认真对待您应用程序的安全性。

首先，使用基本的 hello-world 启动器创建一个新的 Gatsby 项目

创建一个新组件来存放链接。目前，它将作为一个占位符

并创建将包装所有页面并显示导航栏的布局组件

最后，更改索引页以使用布局组件

在本教程中，您将使用硬编码的用户/密码。创建 src/services 文件夹，并将以下内容添加到 auth.js 文件中

有关添加认证的指南包含有关将 Gatsby 连接到外部服务的流程的更多信息。

在本教程的开头，您创建了一个“hello world”Gatsby 网站，其中包含 @reach/router 库。现在，使用 @reach/router 库，您可以创建仅供已登录用户访问的路由。 Gatsby 在底层使用此库，因此您甚至不必安装它。

首先，在项目的根目录下创建 gatsby-node.js。您将定义任何以 /app/ 开头的路由都是您受限制内容的一部分，并且页面将在需要时创建。

注意：您还可以使用文件系统路由 API 来创建客户端路由。

现在，您必须创建一个通用页面，该页面将负责生成受限制的内容

接下来，添加与这些新路由相关的组件。用户配置文件组件用于显示用户数据

登录组件将处理——正如您可能猜到的——登录过程

尽管路由现在可以正常工作，但您仍然可以不受限制地访问所有路由。

为了检查用户是否可以访问内容，您可以将受限制的内容包装在 PrivateRoute 组件中

现在您可以编辑您的 Router 以使用 PrivateRoute 组件

有了客户端路由后，您现在必须重构一些文件，以考虑可用的用户数据。

导航栏将显示用户名和已注册用户的注销选项

索引页将相应地建议登录或查看个人资料

个人资料将显示用户数据

您现在应该拥有一个完整的认证流程，该流程同时支持登录和用户限制区域！

如果您想了解更多关于使用生产就绪的认证解决方案的信息，这些链接可能会有所帮助