快速搭建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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
DOM 事件流详解
Jan 20 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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的FTP学习(一)[转自奥索]
2006/10/09 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
社区八一活动方案
2014/02/03 职场文书
初中英语演讲稿
2014/04/29 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
房贷收入证明范本
2015/06/12 职场文书
小学思品教学反思
2016/02/20 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python