layui.use 中 $.ajaxSetup 不生效,因 Layui 组件默认调用自身封装的 layui.jquery.ajax 而非原生 jQuery 链路;推荐使用 layui.config({ ajaxSetup: { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } } }) 全局配置。
为什么 layui.use 里配 $.ajaxSetup 不生效
layui 默认用的是自己封装的 layui.jquery(即内置 jquery),但它的 $.ajax 并不完全走原生 jquery 的请求链路,尤其在 layui.ajax、table.render、form.on('submit') 等场景下,底层调用的是 layui 自己的 layui.jquery.ajax 或内部适配逻辑,绕过了 $.ajaxsetup。所以直接写 $.ajaxsetup({ headers: { authorization: 'bearer xxx' } }) 对大多数 layui 组件无效。
用 layui.config 的 ajaxSetup 配置项(Layui 2.8+)
Layui 2.8 起支持全局 Ajax 预设,这是最干净、最推荐的方式——它会自动注入到所有 layui.ajax、table.request、form.submit(开启 ajax 模式时)等内部请求中。
实操建议:
- 在调用
layui.use前,立即执行layui.config,确保早于任何模块加载 -
headers中的 Token 建议从 localStorage 或 cookie 动态读取,避免写死 - 若 Token 过期需刷新,该配置本身不支持动态更新,得配合拦截器或重写
layui.ajax
layui.config({
ajaxSetup: {
headers: {
'Authorization': 'Bearer ' + (localStorage.getItem('token') || '')
}
}
});
重写 layui.ajax(兼容旧版 & 需动态控制 Token 的场景)
对 Layui layui.use 之前完成重写,否则模块内可能已引用原始函数。
常见错误现象:layui.ajax is not a function —— 是因为重写时机太晚,Layui 内部已初始化完毕。
实操建议:
- 用
layui.jquery.extend保存原方法,便于 fallback 或调试 - 检查
options.url是否为免鉴权接口(如登录、公共字典),跳过加 Token - Token 为空时,不要发送空
Authorization头,后端可能拒绝
const originalAjax = layui.jquery.ajax;
layui.jquery.ajax = function(options) {
const token = localStorage.getItem('token');
if (token && !/^(\/login|\/public\/)/.test(options.url)) {
options.headers = options.headers || {};
options.headers.Authorization = 'Bearer ' + token;
}
return originalAjax(options);
};
表单提交和表格请求如何额外处理
form.on('submit') 默认是页面跳转;若用 ajax 提交,它底层仍走 layui.ajax,所以前两步已覆盖。但 table.render 的 url 请求默认不走 layui.ajax(而是原生 fetch 或 XMLHttpRequest),除非显式配置 request: { url: ... } 并启用 parseData,此时需手动补 Token。
实操建议:
- 表格请求统一走
request+ajax模式,避免混合机制 - 在
request的url后拼 Token(不推荐)或改用beforeSend(Layui 不支持)→ 实际只能靠重写layui.ajax或改用data函数返回 Promise - 更稳做法:表格
url设为空,用data函数主动调用layui.ajax,这样 Token 自动带上
Token 刷新逻辑和多标签页同步容易被忽略:localStorage 变化不会触发其他 tab 的监听,得用 storage 事件或 BroadcastChannel 主动通知。这点比加 Token 本身更难兜住。










