Security管理前端页面 - java学习教程_ java培训机构_java编程思想

在前面几个小节中，我们只是通过Spring Security对后台增加了权限控制，前端页面并没有做任何处理，前端页面显示的还是对应的链接等内容，用户体验较差。接下来，在前面案例的基础上，讲解如何使用Security与Thymeleaf整合实现前端页面的管理。

1．添加thymeleaf-extras-springsecurity5依赖启动器

在项目pom.xml中添加thymeleaf-extras-springsecurity5依赖启动器，示例代码如下：

<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>

需要注意的是，上述添加的thymeleaf-extras-springsecurity5依赖启动器中，其版本号同样是由Spring Boot统一整合并管理的。如果引用thymeleaf-extras-springsecurity4依赖启动器,那么还需要添加<version>标签手动进行版本管理。

2．修改前端页面，使用Security相关标签进行页面控制

打开chapter07项目首页index.html，引入Security安全标签，并在页面中根据需要使用Security标签进行显示控制，修改后的项目首页内容如文件1所示。

文件1 Index.html

 1    <!DOCTYPE html>
 2    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
 3           xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
 4    <head>
 5        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6        <title>影视直播厅</title>
 7    </head>
 8    <body>
 9    <h1 align="center">欢迎进入电影网站首页</h1>
 10    <div sec:authorize="isAnonymous()">
 11        <h2 align="center">游客您好，如果想查看电影<a th:href="@{/userLogin}">请登录</a></h2>
 12    </div>
 13    <div sec:authorize="isAuthenticated()">
 14        <h2 align="center"><span sec:authentication="name" style="color: #007bff"></span>
 15        您好，您的用户权限为<span sec:authentication="principal.authorities"
 16                             style="color:darkkhaki"></span>，您有权观看以下电影</h2>
 17        <form th:action="@{/mylogout}" method="post">
 18            <input th:type="submit" th:value="注销" />
 19        </form>
 20    </div>
 21    <hr>
 22    <div sec:authorize="hasRole('common')">
 23        <h3>普通电影</h3>
 24        <ul>
 25            <li><a th:href="@{/detail/common/1}">我不是药神</a></li>
 26            <li><a th:href="@{/detail/common/2}">夏洛特烦恼</a></li>
 27        </ul>
 28    </div>
 29    <div sec:authorize="hasAuthority('ROLE_vip')">
 30        <h3>VIP专享</h3>
 31        <ul>
 32            <li><a th:href="@{/detail/vip/1}">速度与激情</a></li>
 33            <li><a th:href="@{/detail/vip/2}">猩球崛起</a></li>
 34        </ul>
 35    </div>
 36    </body>
 37    </html>

文件1中，页面顶部通过“xmlns:sec”引入了Security安全标签，页面中根据需要编写了4个<div>模块。下面，针对这4个<div>模块作用及内部属性进行详细说明，具体如下所示。

（1）第10-12行代码使用sec:authorize="isAnonymous()"属性判断用户是否未登录，只有匿名用户（未登录用户）才会显示“请登录”链接提示。

（2）第13-20行代码使用sec:authorize="isAuthenticated()"属性来判断用户是否已登录，只有认证用户（登录用户）才会显示登录用户信息和注销链接等提示。

（3）第22-28行代码使用sec:authorize="hasRole('common')"属性，定义了只有角色为common（对应权限Authority为ROLE_common）且登录的用户才会显示普通电影列表信息。

（4）第29-35行代码使用sec:authorize="hasAuthority('ROLE_vip')"属性，定义了只有权限为ROLE_vip（对应角色Role为vip）且登录的用户才会显示VIP电影列表信息。

另外，在第14-16行代码进行登录用户信息获取展示时，使用sec:authentication="name"和sec:authentication="principal.authorities"两个属性分别显示了登录用户名name和权限authority。

3．效果测试

重启chapter07项目进行效果测试，项目启动成功后，通过浏览器访问“http://localhost:8080/”查看项目首页，效果如图1所示。

图1 访问项目首页效果

从图1可以看出，此次访问项目首页时，页面上方出现提示“请登录”的链接，页面中不再展示普通电影和VIP电影列表了，说明页面安全访问控制初显成效。接着，单击“请登录”链接跳转到项目登录页面，输入正确的用户名和密码进行登录，登录成功后会跳转到项目首页，效果如图2所示。

图2 访问项目首页效果

不同权限的用户登录后，电影网站首页会显示出用户的权限信息以及可以查看的影片信息，这与前面页面中的控制效果一致，说明在Thymeleaf页面使用的Security安全标签成功实现了页面的安全访问控制。