Express.js 是一款流行的 Node.js 后端框架,它提供了一套便捷的方法来开发 Web 服务器,同时也可以与许多其他的后端工具库和数据库集成。在本文中,我们将探讨如何使用 Express.js 和其他相关库实现用户的登录和注册功能。
获取依赖库和设置项目
在开始编写代码之前,我们需要设置一个 Node.js 项目,并添加我们所需要的依赖库。打开你的命令行工具,输入以下指令以创建一个名为 auth-demo 的文件夹并进入该文件夹:
----- --------- -- ---------
接着,我们使用 npm 安装 express 和其他相关的依赖库:
--- ------- ------- --------------- ----------- -------- ------------- ---------------
在这里,express-session 是用于管理用户会话的库,body-parser 是用于解析用户请求数据的库,bcryptjs 是用于散列和比较密码的库,connect-flash 可以在重定向到另一个页面之前暂存一些信息,method-override 则是用于在使用 RESTful API 时模拟 DELETE 和 PUT 操作的库。
设计用户模型和视图
在编写代码之前,我们需要设计我们的应用程序所用的用户模型和页面视图。我们的应用程序需要能让用户注册和登录,并且需要能够在登录和注册成功或失败后向用户发送一些信息。
其中,我们的用户模型应该包含以下属性:
- 邮箱地址
- 密码
我们需要的视图应分别包含以下元素:
- 注册页面:包含一个表单,该表单包含用户输入的邮箱地址和密码。如果表单中输入的任何信息都不合法,应该向用户显示错误信息并防止提交。
- 登录页面:包含一个表单,该表单包含用户输入的邮箱地址和密码。如果表单中输入的任何信息都不合法,应该向用户显示错误信息并防止提交。
- 注册成功页面:向用户显示注册成功的信息。
- 登录成功页面:向用户显示登录成功的信息。
- 错误页面:向用户显示任何未知错误。
编写注册和登录的路由处理函数
通过定义以下路由处理函数,我们可以在服务器端实现注册和登录功能:
----- ------- - ------------------- ----- ------ - ----------------- ----- ------ - -------------------- ----- -------- - -------------------- ----- ----- - ------------------------- ----- ---------- - ----------------------- ----- ------- - --------------------------- ----- -------------- - --------------------------- -- -------- ------------------------- ----- ---- - ----------------------- -- -- ---- -- ---------------------------------- --------- ---- ---- -- -- ------- - ----- -------------------- ------- --------- ------- ----- ------------------ ---- ---- ---------------------------------- -------------------- ------------------------------- -- --------- -------------------------------------- -- ------ ----------------------- ----- ---- -- - ----------------------------- --- -- -- ---- ---- ------------------------ ----- ---- -- - --- ------ - --- -------------------- -- ------------------- - ------------------ ---------------- - --------------------------- - -- - ------------------ --------------- - ---------------- - -- - ---------------------------- - ------- ------- ----- -------------- ------ --------------- --------- ----------------- --- - ---- - -------------------- ---------------- ---------- -- - -------- - ---------------------- ---------------- -------------------------------- - ---- - ----- ------- - --- ------ ----- -------------- ------ --------------- --------- ----------------- --- ------------------ ----- ----- -- - ----------------------------- ----- ----- ----- -- - ------- ----- ---- ---------------- - ----- -------------- ---------- -- - ------------------------ --------------- ----------------------------- -- ---------- -- - ----------------- ------- --- --- --- - --- - --- -- ------ -------------------- ----- ---- -- - -------------------------- --- -- ---- ---- -- --------------------- ----- ---- ----- -- - ------------------------------ - ---------------- ------------- ---------------- --------------- ------------- ---- ------- ---- ------ --- -- -------- --------------------- ----- ---- -- - ------------- ------------------------ ------------ ----------------------------- --- -------------- - -------
在上面的代码中,register 路由处理函数接收 POST 请求,并在有效输入的情况下将新用户添加到数据库中。如果输入无效,则返回注册页面,并向用户显示相应的错误信息。 login 路由处理函数接收 POST 请求,使用 Passport 中间件进行身份验证,验证成功则重定向到 dashboard 页面,否则重定向到登录页面并向用户显示错误信息。
配置 Passport.js
在上面的代码中,我们使用了 Passport.js 库进行身份验证。Passport.js 是一个灵活的身份验证库,它允许使用本地策略(即用户名和密码),或使用 OAuth 手段进行身份验证。下面是 Passport.js 的配置代码:
----- ------------- - ----------------------------------- ----- -------- - -------------------- ----- ------ - -------------------- -- -- ---- -- ----- ---- - ----------------------- -------------- - -------- ---------- - ---------------- --------------- -------------- ------- -- ------- --------- ----- -- - -------------- ------ ----- -- ---------- -- - -- ------- - ------ ---------- ------ - -------- ----------- -- - ------------------------ -------------- ----- -------- -- - -- ----- ----- ---- -- --------- - ------ ---------- ------ - ---- - ------ ---------- ------ - -------- ------- -- - --- -- ---- ------------------------------- ------ ----- - ---------- --------- --- --------------------------------- ---- ----- - ----------------- -------- ----- ----- - --------- ------ --- --- -
在上面的代码中,本地策略使用邮箱地址作为用户名,之后对指定的 User 模型中的已存在用户进行密码比对。
设计视图
最后,我们需要为我们的路由处理函数编写视图,并使这些视图返回给用户。下面是一个实现了上述所有功能的登录/注册 Express.js 应用程序的完整代码:
----- ------- - ------------------- ----- ------ - ----------------- ----- ------ - -------------------- ----- -------- - -------------------- ----- ----- - ------------------------- ----- ---------- - ----------------------- ----- ------- - --------------------------- ----- -------------- - --------------------------- ------------------------- ----- ---- - ----------------------- ----- --- - ---------- --------------------------------------- ------------------------------- --------- ---- ---- ----------------- ------- --------- ------- ----- ------------------ ---- ---- ------------------------------- ---------------------------- ----------------- ----------------------------------- ------------- ---- ----- -- - ---------------------- - ------------------------- -------------------- - ----------------------- ---------------- - ------------------- --------------- - -------- -- ----- ------- --- ------------- -------- ------- ------------ ----- ---- -- - -------------------- --- --------------------- ----- ---- -- - ------------------------ --- ----------------- --------------------------- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
你可以在网上寻找现成的登录/注册表格 CSS 样式,例如 Bootstrap、Materialize 或 Bulma。
总结
使用 Express.js 实现用户登录和注册功能可以提高应用程序的安全性,并为用户提供更具体的控制权和更安全的登录方式。通过在服务器端中实现身份验证和邮件地址和密码散列存储,你可以保护你的用户的隐私不被恶意攻击者泄露出去。希望本文能对你有所帮助,谢谢阅读!
示例代码已经载入到 https://github.com/fitzab/auth-demo 上。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64526347968c7c53b06ffd92