快速搭建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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
VUE中使用MUI方法
Feb 12 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
第八节 访问方式 [8]
2006/10/09 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
基于对象合并功能的实现示例
2017/10/10 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
npm qs模块使用详解
2020/02/07 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
入党申请自荐书范文
2014/02/11 职场文书
单位委托书格式范本
2014/09/29 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
大学生学期个人总结
2015/02/12 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js