thymeleaf模板中的js脚本里使用shiro标签不起作用解决方法

前言

昨晚笔者将之前的项目改造成使用springboot框架，在前端页面上使用shiro标签的时候遇到了thymeleaf模板中的js脚本里使用shiro标签不起作用这个问题。

由于页面表格使用的是bootstrapTable，列表中的按钮是在js中动态生成的，而列表中的按钮是受权限控制。
先看看原本在jsp中的使用（以下代码只选取涉及到的）：

var operator = {
    title: "操作",
    field: "",
    formatter: function (value, row, index) {
        var buttonHtml = '';
        <shiro:hasPermission name="user:update">
        buttonHtml += '<a href="javascript:void(0);" id="edit_' + index + '" uniqueId="' + row.userId + '"><span class="glyphicon glyphicon-pencil" title="修改"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;';
        </shiro:hasPermission>
        <shiro:hasPermission name="user:del">
        buttonHtml += '<a href="javascript:void(0);" id="del_' + index + '" uniqueId="' + row.userId + '"><span class="glyphicon glyphicon-trash"  title="删除"></span></a>';
        </shiro:hasPermission>
        return buttonHtml;
    }
};

如果在thymeleaf模板中也如上的写法的话，则页面会报错。至于为何无法解析模板中的js脚本里的权限标签这里笔者没有深入查找原因。
注：如何在thymeleaf中使用shiro标签，读者可自行网上搜索，这里不重复说明

问题解决方式

由于shiro标签可以直接在模板中（不是在模板中的js里面）直接使用，那么笔者实现的 思路如下：

1. 在模板html中定义一个div，里面包含shiro权限判断
2. shiro权限判断完成后，那么页面中剩下的就是用户该有的权限
3. 通过js/jquery来获取这个div中的按钮，然后再bootstrapTable在加载每行的时候来获取这个div中的按钮，再进行相应的操作（如对按钮的id等属性进行赋值）即可

实现方式：

1. 定义一个div#operateDiv，然后加入shiro权限判断

<table class="table table-striped table-hover" id="dataTables-example">
</table>
<div id="operateDiv" style="display: none;">
    <shiro:hasPermission name="user:update">
        <a href="javascript:void(0);" id="edit_" uniqueId=""><span class="glyphicon glyphicon-pencil" title="修改"></span></a>
    </shiro:hasPermission>
    <shiro:hasPermission name="user:del">
        <a href="javascript:void(0);" id="del_" uniqueId=""><span class="glyphicon glyphicon-trash"  title="删除"></span></a>
    </shiro:hasPermission>
</div>

2. 在模板中的js里

require(['../js/sys/user'], function (user) {
	//定义一个获取按钮的方法
	function getOperateBtns(index, id) {
	    var html = "";
	    $("#operateDiv").find("a").each(function(){
	        var _srcid = $(this).attr("id");
	        var _id = _srcid + index;
	        var _uniqueId = id;
	        $(this).attr("id", _id);//笔者对按钮的id属性进行赋值
	        $(this).attr("uniqueId", _uniqueId);//笔者对按钮的uniqueId属性进行赋值
	        html += this.outerHTML + "    ";
	        $(this).attr("id", _srcid);
	    });
	    return html;
	}
	//按钮列
	var operator = {
	    title: "操作",
	    field: "",
	    formatter: function (value, row, index) {
	        return getOperateBtns(index, row.userId);
	    }
	};
	//其他代码这忽略（如使用bootstrapTable初始化表格等，这里可在其他js文件中实现即可，不一定要模板中的js脚本里实现）...
	//....
	//对修改按钮绑定事件
	$("#dataTables-example").on("click", "[id^='edit_']", function () {
	    var uniqueId = $(this).attr("uniqueId");
	    user.update(uniqueId);
	});
	//对删除按钮绑定事件
	$("#dataTables-example").on("click", "[id^='del_']", function () {
	    var uniqueId = $(this).attr("uniqueId");
	    user.del(uniqueId);
	});
});

以上为笔者解决该问题的主要代码