Layui 1.x 中 layui.jquery 的 ajaxSetup 不生效,应改用 ajaxPrefilter 注入 Token;table、layer 等组件请求自动携带 Token,但需注意 contentType 配置;401 统一拦截需用 ajaxComplete 并过滤 API 请求。
全局设置 layui.jquery 的 ajaxSetup 不生效?
因为 layui 1.x 默认用的是自己封装的 layui.jquery(基于 jquery 1.10+),但它的 ajaxsetup 在部分版本中被禁用或未透出——直接调用会报 $.ajaxsetup is not a function 或静默失败。
真正能起效的方式是劫持 Layui 内部的 layui.jquery.ajax 方法,或改用其原生 layui.use('jquery', callback) 确保拿到真实 jQuery 实例。
- 必须先通过
layui.use('jquery')加载,不能直接写$或jQuery - 若项目同时引入了外部 jQuery,Layui 可能不认它;优先用 Layui 自带的
- 别在
layui.config里设,那只是模块路径配置,不影响 AJAX 行为
用 layui.jquery.ajaxPrefilter 注入 Token 最可靠
ajaxPrefilter 是 jQuery 提供的预处理钩子,Layui 的 jQuery 支持它,且会在每次 $.ajax、$.get、$.post 前触发,比 ajaxSetup 更稳定、更早介入。
Token 一般存在 localStorage 或 sessionStorage 中,比如键名为 token,读取后塞进 headers 即可。
layui.use('jquery', function(){
var $ = layui.jquery;
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
var token = localStorage.getItem('token');
if (token && !options.headers) {
options.headers = {};
}
if (token) {
options.headers['Authorization'] = 'Bearer ' + token;
// 或改成你后端要求的字段名,如 'X-Access-Token'
// options.headers['X-Access-Token'] = token;
}
});
});
使用 layui.layer.open 或 table.render 时 Token 丢了?
Layui 的组件如 table、form、layer 内部发请求时,走的仍是 layui.jquery.ajax,所以只要上面的 ajaxPrefilter 生效,它们自然携带 Token。
但要注意两个常见断点:
-
table.render的url若是字符串(非函数),请求由 Layui 内部发起,没问题;但若用了method: 'post'且没配contentType,后端可能收不到 headers(默认是application/x-www-form-urlencoded) - 手动调用
$.post(url, data)时,如果data是对象,jQuery 默认序列化并设Content-Type: application/x-www-form-urlencoded,而有些后端只校验application/json下的 headers —— 此时要显式加contentType: 'application/json'并用JSON.stringify
Token 过期后 401 怎么统一拦截?
ajaxPrefilter 只负责发请求前加头,不处理响应。真正要做错误拦截,得用 $.ajaxSetup({ statusCode: { ... } }) 或更稳妥的全局 $(document).ajaxComplete。
但注意:ajaxComplete 会捕获所有请求(包括图标、字体等),所以要过滤掉非 API 请求:
$(document).ajaxComplete(function(event, xhr, settings){
if (settings.url.indexOf('/api/') === 0 || settings.url.startsWith('http://') || settings.url.startsWith('https://')) {
if (xhr.status === 401) {
localStorage.removeItem('token');
location.href = '/login';
}
}
});
这个逻辑必须放在 ajaxPrefilter 之后,且确保 DOM 已就绪(比如包在 layui.ready 或 $(function(){}) 里)。
Token 刷新机制不在本文范围,但提醒一句:别在 ajaxPrefilter 里同步读取新 Token,异步获取(如调用刷新接口)必须配合 Promise 或重发队列,否则请求会卡住。










