layui表格搜索需通过table.set({headers: {'authorization': () => 'bearer ' + localstorage.getitem('token')}})全局动态设置请求头,因table.reload()不继承render时的headers配置。

搜索请求(比如 table.render 的关键词搜索、form.on('submit') 触发的查询)本质仍是 AJAX 请求,Token 设置方式取决于你用的是哪种触发机制——不能统一套用一个方法,否则 token 会丢失或重复覆盖。
table.search 搜索时如何带 Token
Layui 的表格搜索(如 toolbar 按钮或列内搜索)默认复用 table.reload(),而 reload 不继承初始化时的 headers 配置。如果你只在 table.render({ headers: {...} }) 里写了 token,搜索后请求头就空了。
- 必须在
table.set({ headers: {...} })中全局设置,这样所有 reload 行为都会带上 - token 值要用函数动态读取,不能写死字符串:
headers: { 'Authorization': () => 'Bearer ' + localStorage.getItem('token') }(Layui 2.8+ 支持函数值) - 若用低版本 Layui(request 配置,在
request.url或request.where里手动拼 token 参数,或改用$.ajaxPrefilter全局注入
form 提交搜索时 Token 怎么加
form.on('submit(filter)') 默认是同步表单提交(页面跳转),不走 AJAX,所以任何 jQuery 全局 header 设置都无效。要让它带 Token,必须显式改成 AJAX 请求。
- 阻止默认行为:
return false;或event.preventDefault(); - 用
$.post()或admin.req()(LayuiAdmin 环境)手动发请求 - 如果后端要求 header 传 token,别用
form.serialize()直接发——它不支持设 headers;改用$.ajax({ url, method: 'POST', data: formData, headers: {...} }) - 注意
contentType:若后端校验application/json下的 header,就得把 data 序列化成 JSON 并显式设contentType: 'application/json'
为什么 $.ajaxSetup 不适合搜索场景
很多人想“一劳永逸”,直接用 $.ajaxSetup({ headers: {...} }),但它在搜索流程中反而容易出问题:
- token 是初始化时读一次,后续登录态刷新(比如 token 过期续签)后不会自动更新
-
form.on('submit')默认不是 AJAX,不受影响;等你改成$.post后,又可能和table内部请求冲突 - 某些 Layui 插件(如
upload)完全不走 jQuery AJAX,$.ajaxSetup对它无效,但你搜着搜着可能误以为“全局都生效了” - 如果某个搜索请求明确传了
headers,$.ajaxSetup会把它整个覆盖掉,而不是合并
最稳的组合方案
没有银弹,但有适配性最强的搭配:
- 全局 token 注入用
$.ajaxPrefilter(确保table、admin.req、手写的$.get/$.post都生效) - 上传组件单独处理:在
upload.render({ before() { this.headers = {...} } })里动态赋值 - 搜索表单提交不用
form.on默认行为,改用admin.req()(LayuiAdmin)或封装好的$.ajax调用,header 和 token 一起传 - 所有读 token 的地方,统一走
localStorage.getItem('access_token'),不要分散写死或用不同 key
真正容易被忽略的,是搜索动作背后实际走的是哪条请求链路——table.reload、form.submit、还是你手写的 $.ajax?没理清这个,光配 headers 就是蒙眼贴膏药。











