在前端项目中，实现登录认证是非常常见的需求。Next.js 是使用 React 编写的一种服务端渲染的框架，也是现在比较热门的技术之一。本文将演示如何在 Next.js 项目中实现登录认证。
什么是登录认证?
登录认证是一种技术方法，可以验证用户的身份。用户必须在应用程序中提供用户名和密码等访问凭据。服务器会验证用户提供的凭据，然后根据验证结果决定是否将用户重定向到主页或直接访问其他受保护的页面。
实现登录认证可以防止未经授权的人员访问受保护的资源，为用户提供安全的应用。
Next.js 项目中的登录流程
学习如何在 Next.js 中实现登录认证之前，需要了解一个基本的登录流程。 这是一个简单的登录流程：
- 用户尝试访问一个受保护的页面
- 系统检查当前会话中是否存在认证信息，如果存在，则跳过此步骤
- 重定向用户到登录页面
- 用户输入凭据并提交表单
- 系统验证凭据
- 如果凭证无效，则重新显示登录表单并显示错误消息
- 如果凭证有效，则在会话中保存认证信息
- 将用户重定向回其请求的页面
实现登录认证的方法
在 Next.js 项目中实现登录认证通常有两种方法：
- 使用 cookie 存储会话信息
- 使用 JWT（JSON Web Tokens）存储会话信息
在本文中，我们将使用 cookie 存储会话信息的方法来实现登录认证，因为它是一种更为简单和易于使用的方法。
1. 创建登录表单
首先，我们需要创建一个登录表单用于用户输入凭据，如下所示：
------ ------ - -------- - ---- --------
----- --------- - -- -- -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
----- ------------ - ------- -- -
-----------------------
-- ----- ---------
--
------ -
----- ------------------------
-------
------
------
------------
-------------
----------------- -- -----------------------------
--
--------
-------
---------
------
---------------
----------------
----------------- -- --------------------------------
--
--------
------- ----------------------------
-------
--
--
------ ------- ----------这是一个说明了登录页面的基本HTML布局的简单表单。它包含两个input元素和一个提交按钮。 我们将使用 useState React 钩子来更新这两个输入的值，并在提交按钮上添加 handleSubmit() 函数，该函数由我们稍后实现。
2. 实现登录逻辑
接下来，我们需要在 handleSubmit() 函数中实现表单的提交逻辑。对于这个例子，我们会将用户输入的数据发送到一个 mock API，并获得一个响应，该响应将具有一个名为 token 的字段，该字段将作为认证信息保存在客户端的 cookie 中。
------ ------ - -------- - ---- --------
------ - --------- - ---- --------------
------ ------ ---- ------------
----- --------- - -- -- -
----- ------ - ------------
----- ------- --------- - -------------
----- ---------- ------------ - -------------
----- ------------ - ----- ------- -- -
-----------------------
----- -------- - ----- ------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- ------ -------- ---
---
----- ---- - ----- ----------------
-- ------------ -
------------------- ------------
-----------------
-
-- ----- -------
--
------ -
----- ------------------------
-------
------
------
------------
-------------
----------------- -- -----------------------------
--
--------
-------
---------
------
---------------
----------------
----------------- -- --------------------------------
--
--------
------- ----------------------------
-------
--
--
------ ------- ----------这个代码块调用服务器API，并将用户输入的数据作为JSON字符串的格式提交。如果服务器成功响应，并返回一个具有 token 字段的响应，则将 token 存储在 cookie 中，并使用 useRouter() 跳转到主页。
3. 检查是否已验证
现在，我们已经可以在登录页面中提交登录表单，并将 token 存储在客户端的 cookie 中。在每个受保护的页面上，我们需要添加逻辑来检查是否已经验证用户凭据，并在用户未经授权地访问受保护的资源时将其重定向到登录页面。
为此，我们可以创建一个高阶组件（HOC），该组件将服务器端的验证逻辑包装为React组件，然后在需要验证的页面上使用该 HOC。
------ ----- ---- --------
------ ------ ---- ------------
------ - --------- - ---- --------------
----- -------- - ------------------ -- -
----- ------------- - ------- -- -
----- ------ - ------------
----- ----- - --------------------
-- -------- -
----------------------
------ -----
-
------ ----------------- ---------- ---
--
------ --------------
--
------ ------- ---------withAuth() 是一个高阶函数，该函数接受一个组件并返回一个新组件。它检查客户端的cookie中是否存在token。 如果不存在token，则使用 useRouter() 重定向到登录页面。 如果 token 存在，则使用 {...props} 将 WrappedComponent 包含在父组件中并返回。
现在，我们可以在受保护页面中使用这个 HOC 了:
------ -------- ---- ------------------------- ----- ------------- - -- -- - ------ --------- -- - --------- ----------- -- ------ ------- ------------------------
ProtectedPage 即是我们需要存取权限的页面。withAuth(ProtectedPage) 表示使用 HOC 加载 ProtectedPage 组件。
其它注意事项
在实际的项目中，还需要考虑以下问题。
错误处理
在这个示例中，我们仅仅处理了成功正确响应的情况。通常情况下，我们必须考虑错误响应的情况。
计时器
cookie 的过期时间可以通过设置 max-age 或 expires 属性来控制。默认情况下，它们在浏览器关闭后过期。因此，为了让用户保持认证状态，我们可能需要使用 JavaScript 计时器来在 cookie 过期之前续期它。
总结
本文教程演示了如何在 Next.js 中实现登录认证，并检查已验证会话的方法。在实际项目中，我们需要处理错误，设置保持登录状态，防止跨站点请求伪造攻击（CSRF）等其它问题。当应该考虑这些问题，以及如何容易地解决它们是实现任何应用程序的关键点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645efe2b968c7c53b011e122