固定链接 基于 Node.js 和 Express 搭建并部署个人博客系统(三)

基于 Node.js 和 Express 搭建并部署个人博客系统(三)

基于 Node.js 和 Express 搭建并部署个人博客系统(三)

文章简介

上一篇中,我们以用户注册为例,详细介绍了一个 API 接口的完整开发流程,并将数据库引入项目中来,本篇中将继续完善用户登录及登出的逻辑。

第一步 前端事件注册

public/main/js/index.js 中添加登录按钮点击时的事件回调:

第二步 在后台路由中注册登录方法

第三步 使用 Cookie 记录用户登录状态

在入口文件中需要引入并初始化 Cookies 模块:

接下来,就可以通过 get 或 set 方法来获取或设置 Cookie。

在用户登录成功后的响应信息中,将 Cookie 信息返回给客户端,之后客户端再向服务器发起请求时将会带着该信息:

用户再次访问时就会将 Cookie 带过来,我们在入口文件处就可以得到该 Cookie:

以下是浏览器客户端发过来的请求的请求头中 Cookie 的信息,我们可以看到:

接下来,我们需要将该 Cookie 信息保存在 request 对象中,这样一来在其他地方也能引用到:

第四步 引入模板,在前端展示用户登录状态

为了使得登录成功后即使是刷新页面,依然能够保留登录信息,我们需要引入模板引擎,将首页 index.html 作为一个动态模板,将用户信息作为变量传入模板中:

接下来,就可以在模板中判断是否传来了UserInfo信息,进而确定模板的渲染:

第五步 退出登录

退出登录时需要将 Cookie 清空。

前端绑定事件:

后台封装方法:

第六步 区分管理员和普通用户

截止到目前为止,我们只有普通用户这一种角色,在博客系统的后端,管理员可以看到所有用户的信息,而管理员本身也可以有普通用户的一系列操作权限,因此我们需要添加管理员这一角色,可以在 Schema 数据库表描述文件中添加 isAdmin 字段。

默认情况下,用户类型为普通用户,因此 isAdmin 的默认值为 false。

/schemas/users.js

手动在 Mongo 库中插入一条记录,添加管理员账号:

插入后执行查询测试一下是否成功:

如果结果为:

则插入成功。

在登录之后,在 app.js 入口文件中对 Cookies 的处理过程中,得到用户名之后,就可以查询该用户是否为管理员,并将这一信息缓存到 req 对象上,供后续的逻辑使用,出于逻辑处理方便的考虑,我们不把用户是否为管理员这一信息存储于 Cookies 中:

以上我们完成了用户的登录、登出等功能,并添加了管理员这一角色,目前前台界面中用户模块基本有了一个雏形,在下一篇,我们将会开发后台管理模块。

本文作者:穆英杰

您的留言将激励我们越做越好