layuiAdmin以及layui table根据http状态码判断授权

需求

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();
            }
        });

flysnownet

发布了85 篇原创文章 · 获赞 45 · 访问量 95万+

他的留言板关注

layuiAdmin以及layui table根据http状态码判断授权

需求

1.admin.req 发起的请求

请求示例

2.table.render

猜你喜欢