使用Vue封装自定义组件解决Thymeleaf模板引擎不支持Shiro标签的问题
Shiro是一个很强大的权限管理框架,并且提供了jsp标签库,不同角色的用户所拥有的权限不同,界面上应该显示的功能按钮也不同。
shiro提供了标签
<shiro:hasPermission name="权限字符”>功能按钮</shiro>
将功能按钮包裹起来,如果当前角色有这个权限字符就显示这个功能按钮,否则就不显示。
SpringBoot不建议使用jsp当模板引擎,而是推荐使用Thymeleaf模板引擎,这样就没法在页面中使用Shiro标签了,因为Shiro标签库只支持jsp。
我们可以采用自定义组件的方式来封装一个Vue组件,来实现Shiro的功能标签。
我采用前后端分离的思想,后台做一个返回当前角色的功能权限字符串集合。
如下图:
前端使用Ajax的方式来访问这个接口,得到当前用户的角色权限字符集。然后判断当前页面上的菜单和功能按钮所需要的权限字符是否有在这个结果集里,如果有就渲染,没有就不渲染。
我们新建一个js文件,自定义Vue组件的代码如下:
自定义shiro组件会在实例初始化的时候去请求后台的获取当前用户权限接口,得到用户权限集合。
在每个需要判断是否有权限的地方,通过参数传入来判断是否包含在权限集合中。有就渲染,否则就不渲染。
使用方式:
打开我们的html页面
manager.html
引入vue.js和我封装好的shiro_func.js
在需要判断权限的地方 使用 <shiro ispermission=“权限字符串”>功能菜单</shiro>即可。
如果当前用户没有这个菜单的功能权限,那这个菜单就不显示。
注:自定义组件标签<shiro></shiro> 需要在Vue的实例范围内使用。
本项目目前已经完成了日志系统和权限框架的集成,后续我会慢慢完善,封装成一个通用的开发框架,欢迎点赞。
项目地址:https://github.com/lanshiqin/cms-boot
博客地址:https://www.lanshiqin.com
网友评论