最可靠的方式是用layui.config配置ajaxsetup(layui≥2.8),否则须用$.ajaxprefilter;因layui组件内部请求走封装链路,$.ajaxsetup对其无效,而$.ajaxprefilter可动态注入token并兼容所有请求。

最可靠的方式是用 layui.config 配置 ajaxSetup,前提是 Layui 版本 ≥ 2.8;若版本较低或需动态读取 token,则必须用 $.ajaxPrefilter。
为什么 $.ajaxSetup 在 Layui 里经常失效
因为 Layui 内部多数请求(如 table.render、form.on('submit') 的 AJAX 模式)走的是 layui.jquery.ajax 封装链路,而非原生 jQuery 的 $.ajax。直接在 layui.use 里调用 $.ajaxSetup 只影响手动写的 $.get/$.post,对组件内部请求基本没用。
常见错误现象:
-
table.render请求不带Authorization头 - token 刷新后,旧值仍被固写在
$.ajaxSetup里 -
form.on('submit')开启 AJAX 后仍跳转页面(说明根本没走 jQuery 请求链)
layui.config({ ajaxSetup: { headers: {...} } }) 的正确用法
这是 Layui 2.8+ 官方支持的全局配置方式,会自动注入到 layui.ajax、table.request、AJAX 提交的 form 等所有内部请求中。
实操要点:
- 必须在
layui.use之前 调用,否则无效 -
headers中的值是静态快照,不能自动响应localStorage.getItem('token')的变化 - 若需动态 token,得配合
$.ajaxPrefilter或重写layui.ajax - 示例写法:
layui.config({<br> ajaxSetup: {<br> headers: {<br> 'Authorization': 'Bearer ' + (localStorage.getItem('access_token') || '')<br> }<br> }<br>});<br>layui.use(['table', 'form'], function(){ ... });
$.ajaxPrefilter 是唯一能动态注入 token 的方案
它在每次 jQuery 请求发出前触发,可实时读取 localStorage 或 sessionStorage,且兼容 Layui 组件内部调用(只要它们底层用了 layui.jquery.ajax)。
关键细节:
- 必须放在
layui.use('jquery', function(){})回调内,确保用的是 Layui 封装的$ - 务必加域名/路径过滤,避免把 token 错带到 CDN 或统计接口:
if (options.url.startsWith('/api/')) { ... } - 不要和
$.ajaxSetup混用,否则 header 可能被覆盖或重复 - 示例:
layui.use('jquery', function(){<br> var $ = layui.jquery;<br> $.ajaxPrefilter(function(options, originalOptions, jqXHR){<br> var token = localStorage.getItem('access_token');<br> if (token && options.url.startsWith('/api/')) {<br> options.headers = options.headers || {};<br> options.headers.Authorization = 'Bearer ' + token;<br> }<br> });<br>});
table.render 单独设 header 必须用 beforeSend
table.render({ headers: {...} }) 是无效写法 —— Layui 2.8.x 及更早版本根本不识别这个字段。真正生效的方式只有两种:
- 用
table.set({ headers: {...} })设全局默认(但无法区分多表格) - 在
render中用beforeSend注入原生 XHR:table.render({<br> url: '/api/list',<br> beforeSend: function(xhr){<br> var token = localStorage.getItem('access_token');<br> if(token) xhr.setRequestHeader('Authorization', 'Bearer ' + token);<br> }<br>}); -
beforeSend是唯一能操作原始XMLHttpRequest实例的方式,适合需要精细控制的场景(比如跨域凭据、自定义超时)
真正容易被忽略的是:token 动态性与请求链路的耦合。无论选哪种方式,只要 token 存储在客户端且可能刷新,就必须确保 header 注入时机晚于 token 更新动作——$.ajaxPrefilter 是目前唯一能天然满足这点的机制。











