快速搭建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系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
elementui的el-popover修改样式不生效的解决
Jun 30 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php下实现农历日历的代码
2007/03/07 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
python manage.py runserver流程解析
2019/11/08 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python mock测试的示例
2020/10/19 Python
python中doctest库实例用法
2020/12/31 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
几个判断型的面试题
2012/07/03 面试题
求职推荐信
2013/10/28 职场文书
教师实习自我鉴定
2013/12/13 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书