Vue + Axios 请求服务器添加简单签名验证
后端进行接口签名了,前端自然而然的页要加上对应的签名,加密的方式和后端的要保持一致。
MD5
添加js-md5包
你不用去想服务端是怎么实现签名的,你只需要知道服务端用md5加密签名,剩下的我们通过社区的力量,找到对应的md5扩展包,安装到我们的项目即可。我这里用的是js-md5包,在命令行中运行对应命令安装:
npm install js-md5
编写全局Axios请求文件
import axios from 'axios'
// 引用js-md5包
import md5 from 'js-md5'
// 创建axios实例
const req = axios.create({
// 设置基础url
baseURL: '/api/v1',
// 超时时间
timeout: 5000
})
// 请求拦截器
req.interceptors.request.use(
// 配置
config => {
// 合并参数
var params = Object.assign(config.params || {}, {
// 时间戳
timestamp: parseInt(Date.now() / 1000)
})
// 处理待签名的数据
var item = []
for (const k in params) {
if (Object.hasOwnProperty.call(params, k) && k != 'sign') {
item.push(k + params[k])
}
}
var str = item.sort().join('')
// 拼接你的密钥然后进行签名
params.sign = md5(str + '')
config.params = params
return config
},
// 错误处理
error => {
return Promise.reject(error)
}
)
export default req
剩下的,你只要正常调用对应的 axios 实例发起请求就可以了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)