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

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传送门
路径配置

全局引入

  <link rel="stylesheet" href="layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layui/css/formSelects-v4.css" />
</head>
<body>
  <div id="LAY_app"></div>
  <script src="layui/layui.js"></script>
  <script>
  layui.config({
    base: '../src/' //指定 layuiAdmin 项目路径，本地开发用 src，线上用 dist
    ,version: '1.4.0'
  }).extend({
            formSelects: 'lib/extend/formSelects-v4'
        }).use(['index','formSelects']);//'index'
		
  </script>
</body>
</html>

单页版在弹出的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>

效果图