基于 [vue + node + mysql + jwt] 实现token身份验证
前后端通信现状
很早之前的验证方式是基于服务器的,就是把登陆信息存在服务端,每次登陆需要去辨别存储的登陆信息,一般都是通过session来实现。
这样难免有一些问题,即每次用户认证发起请求时,服务端都需要创建一个用记录来存储信息,当越来越多的用户发起请求时,内存的开销也会不断的增加,因此引入了token机制
token的验证原理
基于Token的身份验证的过程如下:
1. 登陆时,客户端发送用户名密码
2. 服务端验证用户名密码是否正确,校验通过就会生成一个有时效的token串,发送给客户端
3. 客户端储存token,一般都会存储在localStorage或者cookie里面
4. 客户端每次请求时都带有token,可以将其放在请求头里,每次请求都携带token
5. 服务端验证token,所有需要校验身份的接口都会被校验token,若token解析后的数据包含用户身份信息,则身份验证通过,返回数据
对比传统的校验方式,token校验有如下优势:
1. 在基于token的认证,token通过请求头传输,而不是把认证信息存储在session或者cookie中。这意味着无状态。你可以从任意一种可以发送HTTP请求的终端向服务器发送请求。
2. 可以避免CSRF攻击
3. 当在应用中进行 session的读,写或者删除操作时,会有一个文件操作发生在操作系统的temp 文件夹下,至少在第一次时。假设有多台服务器并且 session 在第一台服务上创建。当你再次发送请求并且这个请求落在另一台服务器上,session 信息并不存在并且会获得一个“未认证”的响应。我知道,你可以通过一个粘性 session 解决这个问题。然而,在基于 token 的认证中,这个问题很自然就被解决了。没有粘性 session 的问题,因为在每个发送到服务器的请求中这个请求的 token 都会被拦截。
基于vue+nodejs+mysql+jwt搭建基于token的身份校验
- 安装jwt
npm i jsonwebtoken // 安装jsonwebtoken模块
- 生成使用的公钥与私钥,操作如下:
1. 打开命令行工具,输入openssl,打开openssl;
2. 生成私钥:genrsa -out rsa_private_key.pem 2048
3. 生成公钥: rsa -in rsa_private_key.pem -pubout -out rsa_public_key.pem
- 引入jwt,创建token及验证token
const fs = require('fs')
const path = require('path')
const jwt = require('jsonwebtoken')
class Jwt {
constructor(data) {
this.data = data
}
// 生成token
generateToken () {
let data = this.data
let created = Math.floor(Date.now() / 1000)
let cert = fs.readFileSync(path.join(__dirname, '../config/rsa_private_key.pem'))
let token = jwt.sign({
data,
exp: created + 60 * 30,
}, cert, {algorithm: 'RS256'})
return token
}
// 校验token
verifyToken() {
let token = this.data;
let cert = fs.readFileSync(path.join(__dirname, '../config/rsa_public_key.pem'))
let res;
try {
let result = jwt.verify(token, cert, {algorithms: ['RS256']}) || {}
let {exp = 0} = result, current = Math.floor(Date.now() / 1000)
if (current <= exp) {
res = result.data || {}
}
} catch (e) {
res = 'err'
}
return res
}
}
module.exports= Jwt
- node路由使用调用jwt
let express = require('express');
let router = express.Router();
let Jwt = require('../sever/jwt')
let handleSql = require('../sever/database')
/* 登陆接口 */
router.post('/login', function(req, res, next) {
let {userName, password} = req.body
handleSql('SELECT uid FROM user WHERE userName = ? and password = ?', [userName, password], (response) => {
let val = response[0].uid
let jwt = new Jwt(val)
let token = jwt.generateToken()
let result = {
status: 0,
data: token,
message: "操作成功"
}
res.send(result);
})
});
module.exports = router;
- 路由校验token
// 校验token
app.use(function (req, res, next) {
// 分离登陆路由
if (req.url !== '/users/login') {
let token = req.headers.authorization
let jwt = new Jwt(token)
let result = jwt.verifyToken()
if (result === 'err') {
res.send({status: 403, msg: '登录已过期,请重新登录'})
} else {
next()
}
} else {
next()
}
})
- 前端缓存token
async login() {
let res = await this.$api.user.login(this.formData)
if (res && res.status === 0) {
this.$plugin.store.set('token', res.data)
this.$router.replace('/home')
}
}
- 每次请求中携带token
/**
* 请求拦截器
* 每次请求前,如果存在token则在请求头中携带token
*/
instance.interceptors.request.use(
config => {
// 登录流程控制中
// 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
let token = vue.prototype.$plugin.store.get('token')
token && (config.headers.Authorization = token);
return config;
},
error => Promise.error(error))
具体见
https://github.com/FrontWalker2000/self-vue-sys
https://github.com/FrontWalker2000/node-sys/tree/master/sever
当然token的也只是增加了破解成本,此外代码实现层,md5加密,签名,非对称加密等都是包装手段