❤️在繁华中自律,在落魄中自愈❤️
目录
- 一、生成token
- 二、验证token
- 三、完整的jwt.js 代码
- 四、配合express使用token验证
- 五、/api/login接口中的配置
- 六、前端请求拦截器和响应拦截
知道token的都不用多介绍,在node js 中使用的时候是需要引入 jsonwebtoken。
导入包
npm install jsonwebtoken -save
一、生成token
//生成token
const generateToken = function (user) {
let token = jwt.sign({ user }, key, { expiresIn: expir });
return token;
}
二、验证token
// 校验token(错误会抛出异常)
const verifyToken = function (token) {
try {
let tokenKey = jwt.verify(token, key)
return {
code: 200,
msg: '校验成功',
tokenKey,
}
} catch {
return {
code: 100,
msg: '校验失败'
}
}
}
他错误返回的值可以根据自己需求来设置,
三、完整的jwt.js 代码
// 引入模块依赖
const jwt = require('jsonwebtoken');
let key = "fuTkisMQQ2j1ESC0cbaQen1ZWmkMdvLx"
let expir = 60 * 30 //30min(token过期的时间)
//生成token
const generateToken = function (user) {
let token = jwt.sign({ user }, key, { expiresIn: expir });
return token;
}
// 校验token(错误会抛出异常)
const verifyToken = function (token) {
try {
let tokenKey = jwt.verify(token, key)
return {
code: 200,
msg: '校验成功',
tokenKey,
}
} catch {
return {
code: 100,
msg: '校验失败'
}
}
}
module.exports = {
verifyToken,
generateToken
};
我这里的文件目录图
四、配合express使用token验证
首先就是引入自己封装的生成token和验证token 嘛,这里就是配置除了/api/login
和/api/register
接口不验证tokrn,项目中请求其他的接口都会去验证token
const jwt = require('./utils/jwt');// 引入jwt token工具
app.use(function (req, res, next) {
// 这里知识把登陆和注册请求去掉了,其他的多有请求都需要进行token校验
if (req.url != '/api/login' && req.url != '/api/register') {
console.log(req.url)
//获取请求头携带的token
let token = req.headers.token;
//验证token是否过期
let result = jwt.verifyToken(token);
// 如果验证通过就next,否则就返回登陆信息不正确(code == 100就是异常情况)
if (result.code == 100) {
res.send({
code: 403,
msg: '登录已过期,请重新登录'
});
} else {
next();
}
} else {
next();
}
});
五、/api/login接口中的配置
大概过程就是在请求接口之后,会在数据库中验证账号密码的有效性,如果有效,就会返回给客户端token,不然是不会下发给客户端token的。
// 登录
app.post('/api/login', (req, res) => {
console.log(req.route.path)
var user = req.body.user;
var password = req.body.password;
let sql = `SELECT * FROM USER WHERE USER = ${user} AND PASSWORD = ${password}`
connection.query(sql, function (error, results, fields) {
if (error) {
throw error
} else {
if (results[0]) {
let token = jwt.generateToken(user);
// 将 token 返回给客户端
res.send({
status: 200, msg: '登陆成功', token, results
});
} else {
res.send({ status: 201, msg: '账号或者密码错误' });
}
}
});
});
上边所有的就是服务端的配置了。我还是bibi一下前端这边的配置吧,
六、前端请求拦截器和响应拦截
请求拦截器的作用也就是在前端每一次发送请求的时候都携带token,响应拦截的话就是对些特定的响应做一些操作(个人理解,比如说token不合法的情况下可以在前端操作让他跳转到登录的界面啥的…)
这里前端使用vue.js请求用的是axios
//拦截器
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.token = token //请求头加上token
}
return config
},
error => {
return Promise.error(error);
}
)
//响应拦截
axios.interceptors.response.use(response => {
if (response.data.code == 403) {
ElementUI.Message.error('当前登录已失效,请重新登录')
router.replace({ path: '/login' })
}
return response;
}, error => {
return Promise.reject(error.response.data) //返回接口返回的错误信息
})
在响应拦截的时候是因为我服务端的代码是配置的code = 403 提示登录错误如图,所以我前端这边根据 code = 403来跳转页面到登录界面。
标签:node,code,return,error,jwt,token,let,jsonwebtoken From: https://blog.51cto.com/u_15897447/5912412