微服务 教程
1085个小节阅读:195.5k
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
在开发中,用户如果没有权限,我们往往会将页面上的内容隐藏。此时需要Thymeleaf
整合Spring Security
进行前端鉴权。
修改common_aside.html
,添加thymeleaf-springsecurity
命名空间
xxxxxxxxxx
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
修改common_aside.html
,加入security
标签进行前端鉴权
xxxxxxxxxx
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="/backstage/index"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview" id="system">
<a href="#">
<i class="fa fa-folder"></i> <span>系统管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin" sec:authorize="hasAnyAuthority('/admin/all')">
<a href="/backstage/admin/all">
<i class="fa fa-circle-o"></i>用户管理
</a>
</li>
<li id="role" sec:authorize="hasAnyAuthority('/role/all')">
<a href="/backstage/role/all">
<i class="fa fa-circle-o"></i>角色管理
</a>
</li>
<li id="permission" sec:authorize="hasAnyAuthority('/permission/all')">
<a href="/backstage/permission/all">
<i class="fa fa-circle-o"></i>权限管理
</a>
</li>
</ul>
</li>
<li class="treeview" id="business">
<a href="#">
<i class="fa fa-laptop"></i> <span>业务管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="category">
<a href="/backstage/category/all">
<i class="fa fa-circle-o"></i>类型管理
</a>
</li>
</ul>
<ul class="treeview-menu">
<li id="product">
<a href="/backstage/product/all">
<i class="fa fa-circle-o"></i>产品管理
</a>
</li>
</ul>
</li>
</ul>
修改permission_all.html
,给新建按钮进行鉴权配置
xxxxxxxxxx
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<title>权限管理</title>
<th:block th:replace="/backstage/common_resources::common_css"/>
<th:block th:replace="/backstage/common_resources::common_js"/>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<header th:replace="~{/backstage/common_header::header}"></header>
<!-- 导航侧栏 -->
<aside th:replace="~{/backstage/common_aside::aside}"></aside>
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
权限管理
<small>全部权限</small>
</h1>
<ol class="breadcrumb">
<li><a th:href="@{/backstage/index}"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a th:href="@{/backstage/permission/all}">权限管理</a></li>
<li class="active">全部权限</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<a th:href="@{/backstage/permission_add}">
<button type="button" class="btn btn-default" title="新建"
sec:authorize="hasAnyAuthority('/permission/add')">
<i class="fa fa-file-o"></i> 新建
</button>
</a>
</div>
</div>
</div>
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th></th>
<th>权限名</th>
<th>权限详情</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr th:each="permission:${permissionPage.records}">
<td><input name="ids" type="checkbox" value="${permission.pid}"></td>
<td th:text="${permission.permissionName }"></td>
<td th:text="${permission.permissionDesc }"></td>
<td class="text-center">
<a th:href="@{/backstage/permission/edit(pid=${permission.pid})}" class="btn bg-olive btn-xs">修改</a>
<a th:onclick="|javascript:del(${permission.pid})|" class="btn bg-gray btn-xs">删除</a>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共<span th:text="${permissionPage.pages}"></span>页,共<span th:text="${permissionPage.total}"></span>条数据。
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination"></ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- 底部导航 -->
<footer th:replace="~{/backstage/common_footer::footer}"></footer>
</div>
<!-- 在js中获取Model的值 -->
<script th:inline="javascript">
function del(pid) {
if (confirm("确定要删除吗?")) {
location.href = "/backstage/permission/delete?pid=" + pid;
}
}
$(function () {
var currentPage = [[${permissionPage.current}]]; // 当前页
var pages = [[${permissionPage.pages}]]; // 总页数
var contextPath = [[${#servletContext.contextPath}]]; // 项目绝对路径
// 分页插件
$('.pagination').bootstrapPaginator({
bootstrapMajorVersion: 3, // bootstrap版本
currentPage: currentPage, // 当前页
totalPages: pages, // 总页数
numberOfPages: 5, // 最多显示多少页
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
location.href = contextPath + "/backstage/permission/all?page=" + page;
}
});
})
</script>
</body>
</html>
同学们可以根据自己的需求进行鉴权配置