layui支持http状态码
layuiAdmin前后端分离项目中所有请求都必须在header中携带token进行鉴权，鉴权不通过时返回http401状态码重新登录，而layui提供的方法不能判断http状态码，所以将其进行改写
layuiAdmin有两种请求，一种是admin.req发起的ajax,这种请求配置拦截器后会自动携带token
另一种是table.render方式，需要手动带上headers头
1.admin.req 发起的请求修改配置文件config.js ,开启拦截器
layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){ exports('setter', { container: 'LAY_app' //容器ID ,base: layui.cache.base //记录layuiAdmin文件夹所在路径 ,api: 'http://soft222.home.com/' //api接口URL ,views: layui.cache.base + 'views/' //视图所在目录 ,entry: 'index' //默认视图文件名 ,engine: '.html' //视图文件后缀名 ,pageTabs: false //是否开启页面选项卡功能。单页版不推荐开启 ,name: 'layuiAdmin Pro' ,tableName: 'layuiAdmin' //本地存储表名 ,MOD_NAME: 'admin' //模块事件名 ,debug: true //是否开启调试模式。如开启，接口异常时会抛出异常 URL 等信息 ,interceptor: true //是否开启未登入拦截 //自定义请求字段 ,request: { tokenName: 'AUTHORIZATION' //自动携带 token 的字段名。可设置 false 不携带。 } //自定义响应字段 ,response: { statusName: 'code' //数据状态的字段名称 ,statusCode: { ok: 0 //数据状态一切正常的状态码 ,logout: 401 //登录状态失效的状态码 } ,msgName: 'msg' //状态信息的字段名称 ,dataName: 'data' //数据详情的字段名称 } //独立页面路由，可随意添加（无需写参数） ,indPage: [ '/user/login' //登入页 ,'/user/reg' //注册页 ,'/user/forget' //找回密码 ,'/template/tips/test' //独立页的一个测试 demo ] //扩展的第三方模块 ,extend: [ 'echarts', //echarts 核心包 'echartsTheme' //echarts 主题 ] //主题配置 ,theme: { //内置主题配色方案 color: [{ main: '#20222A' //主题色 ,selected: '#009688' //选中色 ,alias: 'default' //默认别名 },{ main: '#03152A' ,selected: '#3B91FF' ,alias: 'dark-blue' //藏蓝 },{ main: '#2E241B' ,selected: '#A48566' ,alias: 'coffee' //咖啡 },{ main: '#50314F' ,selected: '#7A4D7B' ,alias: 'purple-red' //紫红 },{ main: '#344058' ,logo: '#1E9FFF' ,selected: '#1E9FFF' ,alias: 'ocean' //海洋 },{ main: '#3A3D49' ,logo: '#2F9688' ,selected: '#5FB878' ,alias: 'green' //墨绿 },{ main: '#20222A' ,logo: '#F78400' ,selected: '#F78400' ,alias: 'red' //橙色 },{ main: '#28333E' ,logo: '#AA3130' ,selected: '#AA3130' ,alias: 'fashion-red' //时尚红 },{ main: '#24262F' ,logo: '#3A3D49' ,selected: '#009688' ,alias: 'classic-black' //经典黑 },{ logo: '#226A62' ,header: '#2F9688' ,alias: 'green-header' //墨绿头 },{ main: '#344058' ,logo: '#0085E8' ,selected: '#1E9FFF' ,header: '#1E9FFF' ,alias: 'ocean-header' //海洋头 },{ header: '#393D49' ,alias: 'classic-black-header' //经典黑 },{ main: '#50314F' ,logo: '#50314F' ,selected: '#7A4D7B' ,header: '#50314F' ,alias: 'purple-red-header' //紫红头 },{ main: '#28333E' ,logo: '#28333E' ,selected: '#AA3130' ,header: '#AA3130' ,alias: 'fashion-red-header' //时尚红头 },{ main: '#28333E' ,logo: '#009688' ,selected: '#009688' ,header: '#009688' ,alias: 'green-header' //墨绿头 }] //初始的颜色索引，对应上面的配色方案数组索引 //如果本地已经有主题色记录，则以本地记录为优先，除非请求本地数据（localStorage） ,initColorIndex: 0 } });});修改view.js里的 view.req方法,判断http状态码等于401时跳转到登录页
return $.ajax($.extend({ type: 'get' ,dataType: 'json' ,success: function(res){ var statusCode = response.statusCode; //只有 response 的 code 一切正常才执行 done if(res[response.statusName] == statusCode.ok) { typeof options.done === 'function' && options.done(res); } //登录状态失效，清除本地 access_token，并强制跳转到登入页 // else if(res[response.statusName] == statusCode.logout){ // view.exit(); // } //其它异常 else { var error = [ '<cite>Error：</cite> ' + (res[response.msgName] || '返回状态码异常') ,debug() ].join(''); view.error(error); } //只要 http 状态码正常，无论 response 的 code 是否正常都执行 success typeof success === 'function' && success(res); } ,error: function(e, code){ /** * 判断http状态码 */ //登录状态失效，清除本地 access_token，并强制跳转到登入页 if(e.status == response.statusCode.logout){ view.exit(); } else { var error = [ '请求异常，请重试<br><cite>错误信息：</cite>'+ code ,debug() ].join(''); view.error(error); typeof error === 'function' && error(res); } } }, options)); }; 请求示例 //软删除 function del(ids) { admin.req({ url: layui.setter.api + 'm-slide' , type: 'patch' , data: { ids: ids } , done: function (result) { layer.msg(result.msg); } }); } 2.table.render在表格前使用
$.ajaxSetup layui.use(['admin', 'table', 'layer', 'form'], function () { var $ = layui.$ , admin = layui.admin , view = layui.view , table = layui.table , form = layui.form; $.ajaxSetup({ //完成请求后触发。即在success或error触发后触发 complete: function (xhr, status) { if (xhr.status == 401) admin.exit(); } }) table.render({ elem: '#LAY-app-content-list' , url: layui.setter.api + 'm-slide-list' ,toolbar: '#zq_toolbar' //开启头工具栏，此处default：显示默认图标，可以自定义模板，详见文档 , title: '轮播图列表' , headers: { AUTHORIZATION: layui.data('layuiAdmin').AUTHORIZATION } , request: { pageName: 'page' //页码的参数名称，默认：page , limitName: 'size' //每页数据量的参数名，默认：limit } , parseData: function (res) { //res 即为原始返回的数据 return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "data": res.data.data //解析数据列表 }; } , page: true , limit: 20 , cols: [[ { type: 'checkbox', fixed: 'left' } , { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true } , { field: 'name', title: '标题' } , { field: 'pic', title: '图形', width: 160, templet: '#pic', } , { field: 'url', title: '图片网址' } , { field: 'create_time', title: '创建时间', width: 200 } , { fixed: 'right', title: '操作', toolbar: '#test-table-toolbar-barDemo', width: 150 } ]] ,done:function(res,curr,count){ hoverOpenImg(); } }); 58294046