在前端开发中，用户管理是一个重要的功能。在这个过程中，用户注册和登录控制是必不可少的部分。本文将介绍如何使用 Express.js+EJS 来实现用户注册和登录控制，并提供详细的代码示例，希望能对前端开发者有所帮助。
环境配置
在开始之前，我们需要先安装 Node.js 和 Express.js。如果您已经安装了 Node.js， 可以使用以下命令安装 Express.js：
--- ------- ------- ------
同时，我们还需要安装 EJS 模板引擎，可以使用以下命令安装：
--- ------- --- ------
项目结构
在开始编写代码之前，我们先来看一下项目的结构。本文中的项目结构如下所示：
--- ------------ --- ------ - --- --- - --- -- - --- ------ - --- ----- --- ----- - --- --------- - --- --------- - --- ------------ - --- ------------- --- ------
其中，node_modules 是存放第三方包的目录，public 是存放静态资源的目录，css 存放样式文件，js 存放脚本文件，images 和 fonts 分别存放图片和字体文件。views 是存放 EJS 模板文件的目录，index.ejs 是首页模板，login.ejs 是登录页面模板，register.ejs 是注册页面模板，dashboard.ejs 是用户登录后的页面模板。app.js 是应用的入口文件。
实现用户注册
现在我们开始从用户注册功能开始实现。我们需要首先定义路由来处理 GET 和 POST 请求。
--- ------- - -------------------
--- --- - ----------
-------------------- ------------- ---- -
-----------------------
---
--------------------- ------------- ---- -
--- -------- - ------------------
--- -------- - ------------------
-- ----- ------------
-- ----- ------------
-----------------------
---上述代码中，我们定义了 /register 路由来处理 GET 和 POST 请求。GET 请求会渲染 register.ejs 模板，POST 请求则会将账号密码存储到数据库中，然后重定向到登录页面。
在 register.ejs 中，我们需要添加如下的表单来获取用户的账号和密码信息：
----- ------------- -------------------
------ ----------- --------------- ----------------- --
------ --------------- --------------- ---------------- --
------- -------------------------
-------这里的表单通过 POST 请求将数据提交到 /register 路由中。我们使用 name 属性来命名输入框，以便使用 req.body 来获取到提交的数据。
在存储账号密码之前，我们需要先对其进行校验。比如，账号和密码不能为空，密码应该包含大写字母、小写字母、数字和特殊字符等等。如果检查未通过，我们应该返回错误信息，让用户重新填写表单。
实现用户登录
接下来，我们需要实现用户登录功能。和注册功能类似，我们也需要定义路由来处理 GET 和 POST 请求。
----------------- ------------- ---- -
--------------------
---
------------------ ------------- ---- -
--- -------- - ------------------
--- -------- - ------------------
-- ----- ----------
---------------------------
---在 login.ejs 中，我们也需要添加相应的表单来获取用户的账号和密码信息：
----- ------------- ----------------
------ ----------- --------------- ----------------- --
------ --------------- --------------- ---------------- --
------- -------------------------
-------这里的表单通过 POST 请求将数据提交到 /login 路由中，并且表单中的账号和密码输入框与注册表单中的一致。
在存储账号密码之前，我们需要先检查账号密码是否正确。如果正确，我们应该重定向到用户的个人中心页面；如果不正确，我们应该返回错误信息并让用户重新填写表单。
控制用户登录状态
无论是注册还是登录，如果用户已经登录，我们应该将其重定向到个人中心页面。为了控制用户的登录状态，我们可以使用中间件来检查用户的状态。
在 app.js 中添加如下中间件：
-- ---------
-------- ----------------- ---- ----- -
-- ------------------ -
-------
- ---- -
-----------------------
-
-
-- -----
----------------------该中间件用来检查用户是否已经登录。如果已登录，则继续执行后续代码；如果未登录，则将用户重定向到登录页面。
这里涉及到了 express-session 模块，需要先安装：
--- ------- --------------- ------
在 app.js 中添加如下代码：
--- ------- - ---------------------------
-----------------
------- --------- -----
------- ------
------------------ ----
----这里的 secret 用来加密 session，resave 和 saveUninitialized 则是 session 相关的配置选项，具体用法可以查看官方文档。
实现个人中心页面
最后，我们需要实现用户登录后的个人中心页面。这个页面需要展示用户的个人信息，比如账号、密码、邮箱、手机号码等等。
--------------------- ------------- ---- -
--- ---- - -----------------
-- ----- ---------
----------------------- ------ ----- ----- -------
---上述代码中，我们定义了 /dashboard 路由来处理 GET 请求。该路由会从 session 中获取用户信息，然后从数据库中获取用户的个人信息并渲染到 dashboard.ejs 模板中。
在 dashboard.ejs 中添加如下代码：
------- ------------- ------- -------------------------- ---------- ------ ---------------------------- ---------- ------
上述代码中，我们展示了用户的账号信息，以及从数据库中获取到的个人信息。
总结
本文介绍了如何使用 Express.js+EJS 来实现用户注册和登录控制，包括路由的定义、校验账号密码、检查用户状态、获取用户的个人信息等等。希望本文对前端开发的初学者有所帮助。完整代码可以在我的 GitHub 上查看：https://github.com/Jane0522/nodejs-express-user-authentication。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6469de9b968c7c53b09a8bd1