嗷呜, 预感又是一篇长的水文, 但是内心好激动哦
适用于前端(了解 node express 框架的人看), 想要了解后端的人看
好了, 开始废话模式
前后端 token 的使用
最近在做一个后台管理项目, 但是我一个卑微的前端我去哪里找接口的, 没有, 只好我自己写
哎, 我能有什么坏心思呢, 没有
1. 了解 JWT
利用token进行用户身份验证的流程：
- 客户端使用用户名和密码请求登录
- 服务端收到请求，验证用户名和密码
- 验证成功后，服务端会签发一个token，再把这个token返回给客户端
- 客户端收到token后可以把它存储起来，比如放到cookie中
- 客户端每次向服务端请求资源时需要携带服务端签发的token，可以在cookie或者header中携带
- 服务端收到请求，然后去验证客户端请求里面带着的token，如果验证成功，就向客户端返回请求数据
*支持跨域访问：cookie是无法跨域的，而token由于没有用到cookie(前提是将token放到请求头中)，所以跨域后不会存在信息丢失问题
无状态：token机制在服务端不需要存储session信息，因为token自身包含了所有登录用户的信息，所以可以减轻服务端压力
而
JWT就是上述流程当中token的一种具体实现方式，其全称是JSON Web Token，官网地址：https://jwt.io/
通俗地说，JWT的本质就是一个字符串，它是将用户信息保存到一个Json字符串中，然后进行编码后得到一个JWT token，并且这个JWT token带有签名信息，接收后可以校验是否被篡改，所以可以用于在各方之间安全地将信息作为Json对象传输。
JWT 的验证证流程：
- 首先，前端通过Web表单将自己的用户名和密码发送到后端的接口，这个过程一般是一个POST请求。建议的方式是通过SSL加密的传输(HTTPS)，从而避免敏感信息被嗅探
- 后端核对用户名和密码成功后，将包含用户信息的数据作为JWT的Payload，将其与JWT Header分别进行Base64编码拼接后签名，形成一个JWT Token，形成的JWT Token就是一个如同lll.zzz.xxx的字符串
- 后端将JWT Token字符串作为登录成功的结果返回给前端。前端可以将返回的结果保存在浏览器中，退出登录时删除保存的JWT Token即可
- 前端在每次请求时将JWT Token放入HTTP请求头中的Authorization属性中(解决XSS和XSRF问题)
- 后端检查前端传过来的JWT Token，验证其有效性，比如检查签名是否正确、是否过期、token的接收方是否是自己等等
- 验证通过后，后端解析出JWT Token中包含的用户信息，进行其他逻辑操作(一般是根据用户信息得到权限等)，返回结果
用案例来了解, 唔, 我把 app.js 拆分成了下面的几个部分, 代码的顺序没有改变, 依次看就可以
/*
* Start at 2022.4.30
* Author: ximingx.
* Github: https://github.com/ximingx
* Csdn: https://ximingx.blog.youkuaiyun.com/
*/
// 导入 express 模块
// 创建 express 的服务器实例
const express = require('express')
const app = express()
const port = process.env.PORT || 2022;
// 跨域设置
const cors = require('cors')
app.use(cors())
// req.body 解析
app.use(express.json());
app.use(express.urlencoded({extended: false}));
1.1 安装并导入
首先需要我们去安装依赖
> yarn add jsonwebtoken express-jwt
然后导入
// 1. 安装并导入 JWT 相关的两个包, express-jwt版本推荐6.1.1, 最近他更新了, 可能会出现一些意外的问题
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')
1.2 定义你自己的 secret 密钥
// 2. 定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'ximingx';
1.3 JWT字符串解析
// 5. JWT字符串解析
// 用于接收到客户端传来的请求, 验证是否含有 token
// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 `req.user` 属性上
app.use(expressJWT({secret: secretKey, algorithms: ['HS256']}).unless({path: ['/login', '/register']}))
1.4 登陆后生成 token
// 登录的路由, 在这里登录成功后, 返回 token 字符串
app.post('/login', (req, res) => {
// 哎呀,这里就是一个简单的登录测试, 没搞的很复杂
if (!(req.body.username == 'admin' && req.body.password == "root")) {
return res.json({
code: 1,
msg: '用户名或密码错误'
})
}
// 3. 用户登陆成功后, 需要生成token
// 参数1：用户的信息对象
// 参数2：加密的秘钥
// 参数3：配置对象，可以配置当前 token 的有效期
const tokenStr = jwt.sign({
username: req.body.username
}, secretKey, {expiresIn: '1h'})
// 返回登陆成功后返回数据
res.json({
status: 200,
message: '登录成功！',
// 4. 并通过 token 属性发送给客户端
token: tokenStr,
})
})
1.5 验证
// 这里需要这样请求, 否则 token 会无效报错
// axios({
// method: 'post',
// url: 'http://localhost:2022/adimin',
// headers: {
// 'Authorization': 'Bearer ' + token
// }
// })
// 可以分别用带 token 和不带 token 验证一下
// 这是一个有权限的 API 接口
app.get('/admin', function (req, res) {
// 6. 使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
console.log(req.user)
// {
// "status": 200,
// "message": "获取用户信息成功！",
// "data": {
// "username": "admin",
// "iat": 1651242605, // 创建时间
// "exp": 1651246205 // token 有效期
// }
// }
res.send({
status: 200,
message: '获取用户信息成功！',
data: req.user, // 要发送给客户端的用户信息
})
})
这是不带 token 的请求
当我们在登陆后, 获取 token
再次进行测试, 带上 token 就可以啦
1.6 捕获 token 过期异常
// 7：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
// 这次错误是由 token 解析失败导致的
if (err.name === 'UnauthorizedError') {
return res.send({
status: 401,
message: '无效的token',
})
}
res.send({
status: 500,
message: '未知的错误',
})
})
// 端口号监听, 不重要
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
2. 搭建一个简单的后台服务
于是我用了 node 的 express 框架简单的做了一个服务器
下面是 app.js 文件, 看完上面的 jwt 应该就可以很好地理解了
/*
* Start at 2022.
* Author: ximingx.
* Github: https://github.com/ximingx
* Csdn: https://ximingx.blog.youkuaiyun.com/
*/
// 导入 express 模块
// 创建 express 的服务器实例
const express = require('express')
const app = express()
const port = process.env.PORT || 3000;
// 跨域设置
const cors = require('cors')
app.use(cors())
// req.body 解析
app.use(express.json());
app.use(express.urlencoded({extended: false}));
// 加载数据库
require('./db/index');
// 5. JWT字符串解析
const expressJWT = require('express-jwt')
// 2. 定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'ximingx';
// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 `req.user` 属性上
app.use(expressJWT({secret: secretKey, algorithms: ['HS256']}).unless({path: ['/api/ximingx/v1/login']}));
// 自定义模块
const {writeLog} = require('./log/log');
// 路由
app.use('/api/ximingx/v1', require('./router/index'));
// 全局捕获错误
app.use((err, req, res, next) => {
writeLog(err);
// 这次错误是由 token 解析失败导致的
if (err.name === 'UnauthorizedError') {
return res.send({
status: 401,
message: '无效的token',
})
}
return res.status(500).send('未知的错误!');
});
// 监听端口
app.listen(3000, () => {
console.log(`server is running at http://localhost:${port}`);
});
这是我用于登录验证的路由
// 除了 /api/ximingx/v1/login 其他的路由都需要 token
app.use(expressJWT({secret: secretKey, algorithms: ['HS256']}).unless({path: ['/api/ximingx/v1/login']}));
app.use('/api/ximingx/v1', require('./router/index'));
router.js
const express = require('express');
const router = express.Router();
// 1. 安装并导入 JWT 相关的两个包, express-jwt版本推荐6.1.1, 最近他更新了, 可能会出现一些意外的问题
const jwt = require('jsonwebtoken')
// 2. 定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'ximingx';
// 自定义模块
const {UserLogin, findUser, createUser} = require('../db/user')
const {LoginRegex} = require('../utils/regex')
const {writeLog} = require('../log/log')
router.post('/login', (req, res) => {
if (!LoginRegex(req.body)) {
writeLog("Login 参数不支持")
return res.json({
title: "register",
code: 400,
data: {
info: "ximingx",
message: "参数不支持",
}
})
}
UserLogin(req.body).then(user => {
if (user == null) {
return res.json({
title: "login",
code: 400,
data: {
info: "ximingx",
message: "用户名或者密码错误"
}
})
}
// 3. 用户登陆成功后, 需要生成token
// 参数1：用户的信息对象
// 参数2：加密的秘钥
// 参数3：配置对象，可以配置当前 token 的有效期
const tokenStr = jwt.sign({
username: req.body.username
}, secretKey, {expiresIn: '1h'})
res.json({
title: "login",
code: 200,
data: {
com: "ximingx",
message: req.body,
// 4. 并通过 token 属性发送给客户端
token: tokenStr,
}
})
}).catch(err => {
writeLog(err)
return res.json({
title: "login",
code: 400,
dara: {
info: "ximingx",
message: "用户名或者密码错误",
}
})
})
});
3. 前端登录页面
这里我们进行请求
axios({
url: ‘http://localhost:3000/api/ximingx/v1/login’,
method: ‘POST’,
data: {
username: this.username,
password: this.password,
}
})
在登录成功后进行存储
localStorage.setItem(‘token’, res.data.data.token);
inputInfo: function () {
let password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,18}$/;
let username = /^[a-zA-Z0-9]{3,12}$/;
if (!(username.test(this.username) && password.test(this.password))) {
return ElNotification.error('用户名或者密码不合法！');
}
axios({
url: 'http://localhost:3000/api/ximingx/v1/login',
method: 'POST',
data: {
username: this.username,
password: this.password,
}
}).then(res => {
if (res.data.code == 200) {
localStorage.setItem('token', res.data.data.token);
ElNotification({
title: 'Success',
message: '登录成功 请稍等...',
type: 'success',
});
this.$router.push({
path: '/home',
})
} else {
ElNotification.error({
title: '用户名或者密码错误',
message: `请重新输入`,
})
}
}).catch(res => {
ElNotification({
title: 'Error',
message: '用户名或者密码错误',
type: 'error',
});
})
},
4. 导航守卫
但是呢, 即使是没有 token, 我们在 url 里输入别的页面仍然会跳转
这里就需要我们在前端 router.js 里配置, 判读有无 token, 使别人不能随便的进行别的有权限的页面的访问
// to 从哪一个路径来, from 到哪一个路径去, next 是否继续执行, 表示放行
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
return next()
} else {
const token = localStorage.getItem('token')
if (!token) {
return next('/login')
}
return next()
}
})
但是还是有问题, 别人可以自己加 token 啊
然后我们就可以快乐的跳转了
所以呢, 最后还应该给导航守卫还应该添加验证
扫一扫
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
