快速搭建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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
Jul 26 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
原生JavaScript实现五子棋游戏
Nov 09 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
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
自我评价200字分享
2013/12/17 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js