快速搭建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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js canvas实现擦除动画
Jul 16 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 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获取昨天、今天及明天日期的方法
2016/02/03 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Three.js学习之网格
2016/08/10 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python实现感知器算法详解
2017/12/19 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
大学生就业自荐信
2013/10/26 职场文书
个人现实表现材料
2014/02/04 职场文书
行政人事岗位职责
2014/03/17 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
SQL Server 中的事务介绍
2022/05/20 SQL Server
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android