layui怎么在全局范围内给所有异步请求添加统一的加签签名验签机制

梦墨大大_7918

梦墨大大_7918

2026-10-24

570人浏览

原创

layui全局加签必须用$.ajaxprefilter,因其可在每次请求前动态读取url、data等上下文生成签名;layui.config仅支持静态headers,无法满足时间戳、随机串、body哈希等实时计算需求。

layui怎么在全局范围内给所有异步请求添加统一的加签签名验签机制

layui 全局加签必须用 $.ajaxPrefilter,layui.config 不支持动态签名

因为加签依赖实时参数(如时间戳、随机串、body 内容哈希),而 layui.config({ ajax: { headers: {} } }) 只接受静态对象,无法在每次请求时重新计算签名。哪怕你写成 'X-Sign': sign(),函数也只在 config 执行时调用一次,后续所有请求都复用这个过期签名。

真正可行的方案是 $.ajaxPrefilter —— 它在每次 jQuery 请求发出前触发,能读取 options.url、options.data、options.type 等完整上下文,适合构造动态签名。

  • 必须在 layui.use(['jquery'], callback) 回调内执行,确保使用的是 Layui 封装的 $
  • 建议加域名白名单判断,避免对 CDN、统计接口等非业务请求误加签
  • 签名逻辑里要区分 GET 和 POST/PUT:前者拼 query,后者需先序列化 data 或提取原始 options.contentType 判断是否已为 JSON 字符串
  • 若后端要求签名包含请求体(body)哈希,且前端用 contentType: 'application/json',则需在 options.data 是对象时手动 JSON.stringify 后再哈希;若为字符串则直接参与计算

加签字段该放 headers 还是 data?看后端约定

绝大多数中电联、金融或政企类协议要求签名放在请求头(如 X-Sign、X-Timestamp、X-Nonce),而非请求体。这是因为:

  • 请求体可能被网关或代理修改(如 gzip、重写),导致验签失败
  • 签名头可被反向代理统一审计,不侵入业务逻辑
  • GET 请求无 body,只能靠 headers 携带签名元数据

所以优先往 options.headers 上挂:options.headers['X-Sign'] = signStr、options.headers['X-Timestamp'] = Date.now().toString()、options.headers['X-Nonce'] = Math.random().toString(36).substr(2, 8)。

如果后端强制要求签名塞进 data(比如老系统改造未动接口层),则需根据 options.type 分支处理:GET 改用 options.url += '&sign=' + signStr;POST 若 contentType 是 application/x-www-form-urlencoded,就把 sign 合并进 options.data 对象;若是 application/json,就得先 JSON.parse(options.data)(注意判空和类型)、合并后再 JSON.stringify 回去。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

table.render 和 form.on('submit') 的加签会失效?检查是否漏了 contentType 和 beforeSend

Layui 的 table 和 AJAX 模式的 form 默认发请求时,contentType 是 application/x-www-form-urlencoded,但很多加签逻辑默认按 JSON 处理 data,结果算出来的签名和后端不一致。

  • 对 table.render,必须显式配置 contentType: 'application/json',并在 beforeSend 里手动序列化 data,否则 $.ajaxPrefilter 拿到的 options.data 是对象,后端收到的却是 form 表单字符串
  • 对 form.on('submit'),若没设 contentType,jQuery 会自动把对象转成 query string 并设 header,此时加签用的 data 必须是同样格式(可用 $.param(options.data)),不能直接 JSON.stringify
  • 如果后端要求签名覆盖整个 HTTP 报文(含 headers),那仅靠 $.ajaxPrefilter 不够——它无法拿到最终发出的 header 字符串,此时必须降级到 beforeSend 钩子,在请求真正发出前补全签名

签名密钥怎么安全存?别硬编码,也别全放 localStorage

加签密钥(如 appSecret)绝不能写死在 JS 里,也不该全量存在 localStorage —— XSS 一打就穿。实际可选路径只有两条:

  • 登录成功后,后端返回一个短期有效的加签 Token(如 sign_token),有效期 30 分钟,每次加签前先校验本地是否存在且未过期;过期则静默刷新(用 refresh_token 换新),失败则跳登录
  • 敏感操作(如支付、启停充电)前,单独拉一次「加签票据」接口,返回一次性 nonce + signature,前端只负责透传,不参与密钥运算

第二条更安全,但增加 RTT;第一条更常用,需配合内存缓存(如 sessionStorage 存 timestamp,避免反复读 localStorage)。无论哪种,签名函数本身都不该直接接触原始密钥,而是通过封装好的 getSignParams() 获取运行时参数。

真正容易被忽略的是签名时间窗口校验:前端生成的 X-Timestamp 和后端当前时间差超过 5 分钟,后端应直接拒收。这意味着你得定期校准前端时间(比如登录时从服务端同步一个 serverTimeOffset),否则设备时钟偏差会导致批量验签失败。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui layui菜鸟教程

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2623

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5723

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6690

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6398

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

903

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3020

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2833

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.3万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习