快速搭建Node.js(Express)用户注册、登录以及授权的方法


Posted in Javascript onMay 09, 2019

项目准备

  1. 建立一个文件夹,这里叫 EXPRESS-AUTH
  2. npm init -y

启动服务

  1. 新建一个server.js 或者 app.js
  2. npm i express
  3. 开启端口,启动服务
// server.js
// 引入 express
const express = require('express')
// 创建服务器应用程序
const app = express()

app.get('/user', async (req, res) => {
 res.send('hello node.js')
})

app.listen(3001, () => {
 console.log('http://localhost:3001')
})

在命令行运行 nodemon .\server.js 命令启动服务

注:nodemon 命令需要全局安装 nodemon( npm install --global nodemon ), 在浏览器访问/user时如下,则说明开启成功

快速搭建Node.js(Express)用户注册、登录以及授权的方法

实现简单的 GET 请求接口

创建处理 get 请求的接口

app.get('/api/get', async (req, res) => {
 res.send('hello node.js')
})

在vscode商店中下载 REST Client

快速搭建Node.js(Express)用户注册、登录以及授权的方法

新建一个 test.http 文件测试接口,点击 Send Request 发送请求

// test.http
@url=http://localhost:3001/api

### 
get {{url}}/user

快速搭建Node.js(Express)用户注册、登录以及授权的方法

如上图,get 请求成功

操作 MongoDB 数据库

连接数据库

  1. 安装 mongodb 数据库
  2. 在需要启动的盘符根目录下新建 data/db 文件夹
  3. 在命令行对应的盘符下输入 mongod 命令,即可开启服务
  4. 有需要可以下载NoSQLBooster for MongoDB软件

建立数据库模型

  • npm i mongoose
  • 新建 model.js 操作数据库
// 引入 mongoose 
const mongoose = require('mongoose')

// 连接数据库,自动新建 ExpressAuth 库
mongoose.connect('mongodb://localhost:27017/ExpressAuth', {
 useNewUrlParser: true,
 useCreateIndex: true
})

// 建立用户表
const UserSchema = new mongoose.Schema({
 username: {
 type: String,
 unique: true
 },
 password: {
 type: String,
 }
})

// 建立用户数据库模型
const User = mongoose.model('User', userSchema)

module.exports = { User }

简单的 POST 请求

创建处理 POST 请求的接口

// server.js
app.post('/api/register', async (req, res) => {
 console.log(req.body);
 res.send('ok')
})
app.use(express.json()) // 设置后可以用 req.body 获取 POST 传入 data

设置 /api/register

###
POST {{url}}/register
Content-Type: application/json

{
 "username": "user1",
 "password": "123456"
}

注册用户

// server.js
app.post('/api/register', async (req, res) => {
 // console.log(req.body);
 const user = await User.create({
 username: req.body.username,
 password: req.body.password
 })
 res.send(user)
})

数据库里多了一条用户数据:

快速搭建Node.js(Express)用户注册、登录以及授权的方法

密码 bcrypt 加密

  • npm i bcrypt
  • 在 model.js 中设置密码入库前加密,这里的 hashSync方法接受两个参数,val 表示传入的 password,10表示加密的等级,等级越高,所需转化的时长越长

快速搭建Node.js(Express)用户注册、登录以及授权的方法

用户登录密码解密

在 server.js 中添加处理 /login 的POST请求

app.post('/api/login', async (req, res) => {
 const user = await User.findOne({
 username: req.body.username
 })
 if (!user) {
 return res.status(422).send({
  message: '用户名不存在'
 })
 }
 // bcrypt.compareSync 解密匹配,返回 boolean 值
 const isPasswordValid = require('bcrypt').compareSync(
 req.body.password,
 user.password
 )
 if (!isPasswordValid) {
 return res.status(422).send({
  message: '密码无效'
 })
 }
 res.send({
 user
 })
})

登录添加 token

安装 jsonwebtoken npm i jsonwebtoken
引入 jsonwebtoken,自定义密钥

// 引入 jwt
const jwt = require('jsonwebtoken')
// 解析 token 用的密钥
const SECRET = 'token_secret'

在登录成功时创建 token

/* 
生成 token
jwt.sign() 接受两个参数,一个是传入的对象,一个是自定义的密钥
*/
const token = jwt.sign({ id: String(user._id) }, SECRET)
res.send({
 user,
 token
})

这样我们在发送请求时,就能看到创建的 token

快速搭建Node.js(Express)用户注册、登录以及授权的方法

解密 token获取登录用户

先在 server.js 处理 token

app.get('/api/profile', async (req, res) => {
 const raw = String(req.headers.authorization.split(' ').pop())
 // 解密 token 获取对应的 id
 const { id } = jwt.verify(raw, SECRET)
 req.user = await User.findById(id)
 res.send(req.user) 
})

发送请求,这里的请求头是复制之前测试用的 token

### 个人信息
get {{url}}/profile
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjZDI5YjFlMTIwOGEzNDBjODRhNDcwMCIsImlhdCI6MTU1NzM2ODM5M30.hCavY5T6MEvMx9jNebInPAeCT5ge1qkxPEI6ETdKR2U

服务端返回如下图,则说明解析成功

快速搭建Node.js(Express)用户注册、登录以及授权的方法

配套完整代码和注释见 Github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
js创建对象的方式总结
Jan 10 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
uni-app之APP和小程序微信授权方法
May 09 #Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 #Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
JS原型与继承操作示例
May 09 #Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 #Javascript
You might like
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
使用Python发现隐藏的wifi
2020/03/04 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
班级旅游计划书
2014/05/03 职场文书
环保专项行动方案
2014/05/12 职场文书
第一书记观后感
2015/06/08 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
python中 .npy文件的读写操作实例
2022/04/14 Python