layui（单页版）整合springboot添加token时前端配置+formSelects-v4自动选中(ajax和表格请求亲测)

妖狐艹你老母 2021-09-02 09:25 594阅读 0赞

## 1.登陆获取token ##

//请求登入接口
        admin.req({ 
          url: setter.baseUrl+'admin/login' //实际使用请改成服务端真实接口
          ,data: obj.field
    	   ,type: "post"
          ,done: function(res){ 
          
            //请求成功后，写入 access_token
            layui.data(setter.tableName, { 
              key: setter.request.tokenName
              ,value: res.data.access_token
            });
            
            //登入成功的提示与跳转
            layer.msg('登入成功', { 
              offset: '15px'
              ,icon: 1
              ,time: 1000
            }, function(){ 
              location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
            });
          }
        });

## 2.config.js全局配置（解决ajax） ##

因为项目中整合了SpringSecurity+jwt而且又是前后端分离的所以ajax请求还配置了允许cookie跨域,个人配置不喜请忽略。  
以下配置是在layui自带的jquery中ajaxSettings直接添加的，以应用到所以ajax请求

//前端ajax允许cookie跨域：
    			crossDomain: true,
    			xhrFields: { 
    				withCredentials: true
    			},

**config.js中添加header里加请求头参数和 token过期处理，因为layui自带的jquery经本人测试只在项目启动时加载一次，如果在那里添加是无法获取登陆返回的token的，于是在了config.js中**

layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
    	layui.$.ajaxSetup({	   	
    	        beforeSend: function(jqXHR, settings) {	   
    	            /*header里加请求头参数*/
    	           jqXHR.setRequestHeader('access_token', layui.data("layuiAdmin")['access_token'] || {})
    	        },
    	       //token过期处理
    	       complete: function( xhr,data ){
    	       	        if(xhr.responseJSON&&xhr.responseJSON.code=="202") {
    	       	            layer.alert('登陆已过期,请重新登陆', {
    	       	                icon: 5,
    	       	                title: "提示"
    	       	            },function(index) {
    	       					
    	       	              //清空本地记录的 token
    	       	              layui.data(layui.setter.tableName, {
    	       	              	key: layui.setter.request.tokenName,
    	       	              	remove: true
    	       	              });   
    	       	              //跳转到登入页
    	       	              location.hash = '/user/login';
    	       				  //layer.close(index);
    	       				   layer.closeAll(); 
    	       	            });
    	       	        }
    	       } 
    	      });
    
    	
      exports('setter', {
      。。。。。。。

## 3.table.js修改解决携带token问题 ##

a.contentType && 0 == a.contentType.indexOf("application/json") && (d = JSON.stringify(d)), i.loading(), t.ajax({ 
    					type: a.method || "get",
    					url: a.url,
    					contentType: a.contentType,
    					data: d,
    					dataType: "json",
    					//自定义携带token
    					headers: { "access_token":layui.data(layui.setter.tableName)['access_token']}|| { },
    					success: function(t) { 
    						"function" == typeof a.parseData && (t = a.parseData(t) || t), t[n.statusName] != n.statusCode ? (i.renderForm(),
    								i.errorView(t[n.msgName] || '返回的数据不符合规范，正确的成功状态码应为："' + n.statusName + '": ' + n.statusCode)) : (i.renderData(
    								t, e, t[n.countName]), o(), a.time = (new Date).getTime() - i.startTime + " ms"), i.setColsWidth(),
    							"function" == typeof a.done && a.done(t, e, t[n.countName])
    					},
    					error: function(e, t) { 
    						i.errorView("数据接口请求异常：" + t), i.renderForm(), i.setColsWidth()
    					} ,
    					//token过期处理
                    complete: function( xhr,data ){ 
                    /* layui.data(layui.setter.tableName, { key: "access_token", value: xhr.getResponseHeader("access_token")==null?layui.data(layui.setter.tableName)['token']:xhr.getResponseHeader("token") }) */
    					        //console.log(xhr)
    					        if(xhr.responseJSON&&xhr.responseJSON.code=="202") { 
    					           // console.log(xhr.responseJSON);
    					            layer.alert('登陆已过期,请重新登陆', { 
    					                icon: 5,
    					                title: "提示"
    					            },function(index) { 
    									
    					              //清空本地记录的 token
    					              layui.data(layui.setter.tableName, { 
    					              	key: layui.setter.request.tokenName,
    					              	remove: true
    					              });   
    					              //跳转到登入页
    					              location.hash = '/user/login';
    								  //layer.close(index);
    								   layer.closeAll(); 
    					            });
    					        }
                    }

## 4.全局引入formSelects-v4下拉多选框 ##

[formSelects-v4传送门][formSelects-v4]  
**路径配置**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center]  
**全局引入**

单页版在弹出的html中使用

<div class="layui-input-block">
    			<script type="text/html" template lay-done="layui.data.sendParams(d.params);" /> <select name="roleId" xm-select="roleId" lay-verify="required"> </select> <script> layui.use(['admin', 'form','formSelects'], function() { var $ = layui.$, form = layui.form; var formSelects = layui.formSelects; //定义一个lay-done对应的全局方法，供动态模板调用执行 layui.data.sendParams = function(params) { //所有角色 var sysRoles = params.sysRoles; //选中角色 var roleList = params.roleList; // 渲染多选下拉框 var roleSelectData = new Array(); for (var i = 0; i < sysRoles.length; i++) { //固定样式 roleSelectData.push({ name: sysRoles[i].name, value: sysRoles[i].id }); } //本地加载模式local formSelects.data('roleId', 'local', { arr: roleSelectData }); // 选中value为result中的option formSelects.value('roleId', roleList); } }); </script>

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center 1]

[formSelects-v4]: https://fly.layui.com/extend/formSelects/#download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/54a5ca23bac24a3d88d7d08129151c8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/08996e01ab0c4f1eb0c7c8b33596e36e.png