【SpringSecurity】七、SpringSecurity集成thymeleaf

文章目录

  • 1、thymeleaf
  • 2、依赖部分
  • 3、定义Controller
  • 4、创建静态页面
  • 5、WebSecurityConfigurerAdapter
  • 6、权限相关
  • 7、当用户没有某权限时，页面不展示该按钮

在这里插入图片描述

1、thymeleaf

查了下读音，leaf/li:f/，叶子，前面的单词发音和时间time一样。

  • 官网：https://www.thymeleaf.org/
  • 参考中文文档：https://fanlychie.github.io/post/thymeleaf.html

在这里插入图片描述

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

即Thymeleaf是适用于Web和独立环境的现代服务器端Java 模板引擎 。模板引擎的作用就是使用户界面与业务数据（内容）分离，就是做好一个模板后套入对应位置的数据，最终以html的格式展示出来。知乎上有个很形象的例子：

=======================================================
在这里插入图片描述

简单说就是，没模板引擎，就像高中操场开会，桌子、板凳、场地都要现搬现搭。而模板引擎的作用就像大学开会，有专门会议室，板凳桌子设备都准备好了，今天学院A进来用了，明天学院B进来用了，学院A、B就像数据。

将模板设计好之后直接填充数据即可而不需要重新设计整个页面，开箱即用，提高页面、代码的复用性。

市面上开源的第三方的模板引擎也比较多，有Thymeleaf、FreeMaker、Velocity等

2、依赖部分

引入thymeleaf依赖：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

当然如果是新创建项目，直接勾选热门依赖就行：

在这里插入图片描述

修改配置文件：

spring:thymeleaf:cache: false # 开发阶段可以先不使用缓存check-template: true  # 检查thymeleaf模板是否存在

之所以不使用缓存，是为了临时有改动时，点一下小锤子就能看效果：

在这里插入图片描述
在IDEA添加thymeleaf文件模板，方便以后使用：File-Setting

在这里插入图片描述

模板名称thymeleaf ，扩展名html，内容如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>#[[$Title$]]#</title>        
</head>
<body>
#[[$END$]]#
</body>
</html>
PS：
#[[$Title$]]# #[[$END$]]# 这两处的作用是：
当你新建一个模板页面时，在<title>标签中输入标题内容后，只需要点击回车键，光标就会直接跳到<body>内，省去了你挪动鼠标，或者挪动方向键的步骤，也可以给你节省一点点时间。

也可在IDEA中安装html转thymeleaf的插件：

在这里插入图片描述

3、定义Controller

//这里别用RestController了，不再返回一个json对象或者普通字符串了
@Controller  
@RequestMapping("/login")
public class LoginController {/*** 跳转到登陆页面*/@RequestMapping("/toLogin")    //GET、POST都行的意思public String toLogin(){return "login";}}

上面的这个return "login"字符串，是返回thymeleaf的逻辑视图名，物理视图 = 前缀 + 逻辑视图 + 后缀，即/templates/ + login + .html(点住application.yaml文件中thymeleaf的配置查看源码：

在这里插入图片描述

再定义登录成功后进入主页的controller，返回逻辑视图名main（随便起的）：

@Controller
@RequestMapping("/index")
public class IndexController {/*** 登录成功后进入主页*/@RequestMapping("/toIndex")public String toIndex(){return "main";}
}

4、创建静态页面

在templates下面创建login.html和main.html：（放到类路径中的resource下面）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用户登陆</title>
</head>
<body>
<h2>登录页面</h2>
<form action="/login/doLogin" method="post"><table><tr><td>用户名:</td><td><input type="text" name="uname" value="thomas"></td></tr><tr><td>密码:</td><td><input type="password" name="pwd"></td><span th:if="${param.error}">用户名或者密码错误</span></tr><tr><td colspan="2"><button type="submit">登录</button></td></tr></table>
</form>
</body>

mian.html内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统首页</title>
</head>
<body>
<h1 align="center">系统首页</h1>
<a href="/student/query">查询学生</a>
<br>
<a href="/student/add">添加学生</a>
<br>
<a href="/student/update">更新学生</a>
<br>
<a href="/student/delete">删除学生</a>
<br>
<a href="/student/export">导出学生</a>
<br>
<br><br><br>
<h2><a href="/logout">退出</a></h2>
<br>
</body>
</html>

5、WebSecurityConfigurerAdapter

修改安全配置类：

@EnableGlobalMethodSecurity(prePostEnabled = true)
//@Configuration
@Slf4j
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {//编码器@Beanpublic PasswordEncoder passwordEncoder(){return new BCryptPasswordEncoder();}@Overrideprotected void configure(HttpSecurity http) throws Exception {//设置登陆方式http.formLogin()//使用用户名和密码的登陆方式.usernameParameter("uname") //页面表单的用户名的name，上面login.html中定义的用户名的参数名.passwordParameter("pwd")//页面表单的密码的password，上面login.html中定义的密码的参数名.loginPage("/login/toLogin") //自己定义登陆页面的地址.loginProcessingUrl("/login/doLogin")//配置登陆的url.successForwardUrl("/index/toIndex") //登陆成功跳转的页面，成功跳首页.failureForwardUrl("/login/toLogin")//登陆失败跳转的页面，失败跳登录页.permitAll();//配置退出方式http.logout().logoutUrl("/logout").logoutSuccessUrl("/login/toLogin").permitAll();//配置路径拦截 的url的匹配规则http.authorizeRequests()//任何路径要求必须认证之后才能访问.anyRequest().authenticated();// 先禁用csrf跨站请求攻击保护  后面可以使用postman工具测试，注意要禁用csrfhttp.csrf().disable();}
}

此时登录后可以跳转首页了：

在这里插入图片描述

6、权限相关

修改上一篇中的StudentController，写接口，返回不同的逻辑视图名称字符串。并给接口加权限校验。

@Controller   //返回的不是一个字符串，是一个视图名
@Slf4j
@RequestMapping("/student")
public class StudentController {@GetMapping("/query")@PreAuthorize("hasAuthority('student:query')")public String queryInfo(){return "user/query";   //:templates/ + user/query + .html    }@GetMapping("/add")@PreAuthorize("hasAuthority('student:add')")public String addInfo(){return "user/add";}@GetMapping("/update")@PreAuthorize("hasAuthority('student:update')")public String updateInfo(){return "user/update";}@GetMapping("/delete")@PreAuthorize("hasAuthority('student:delete')")public String deleteInfo(){return "user/delete";}@GetMapping("/export")@PreAuthorize("hasAuthority('student:export')")public String exportInfo(){return "/user/export";}
}

在templates/user下面创建学生管理的各个页面，export.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
>
<head><meta charset="UTF-8"><title>系统首页-学生管理</title>
</head>
<body>
<h1 align="center">系统首页-学生管理-导出</h1>
<a href="/index/toIndex">返回</a>
<br>
</body>
</html>

add.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统首页-学生管理</title>
</head>
<body>
<h1 align="center">系统首页-学生管理-新增</h1>
<a href="/index/toIndex">返回</a>
<br>
</body>
</html>

update.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统首页-学生管理</title>
</head>
<body>
<h1 align="center">系统首页-学生管理-更新</h1>
<a href="/index/toIndex">返回</a>
<br>
</body>
</html>

delete.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统首页-学生管理</title>
</head>
<body>
<h1 align="center">系统首页-学生管理-删除</h1>
<a href="/index/toIndex">返回</a>
<br>
</body>
</html>

query.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统首页-学生管理</title>
</head>
<body>
<h1 align="center">系统首页-学生管理-查询</h1>
<a href="/index/toIndex">返回</a>
<br>
</body>
</html>

在static/error下面创建403.html，当没有权限的时候，就会使用这里的403页面代替框架自带的403页面 ：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>403</title>
</head>
<body>
<h2>403:你没有权限访问此页面</h2>
<a href="/index/toIndex">去首页</a>
</body>
</html>

查看效果：

在这里插入图片描述

7、当用户没有某权限时，页面不展示该按钮

当用户点击页面上的链接请求到后台之后没有权限会跳转到403，那么如果用户没有权限，对应的按钮就不显示出来，这样岂不是更好吗。下面开始实现：

  • 引入依赖
<dependency><groupId>org.thymeleaf.extras</groupId><artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>
  • 修改首页代码，在标签的sec属性中加入对应的所需权限
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head><meta charset="UTF-8"><title>系统首页</title>
</head>
<body>
<h1 align="center">系统首页</h1>
<a href="/student/query" sec:authorize="hasAuthority('student:query')" >查询用户</a>
<br>
<a href="/student/add" sec:authorize="hasAuthority('student:save')" >添加用户</a>
<br>
<a href="/student/update" sec:authorize="hasAuthority('student:update')" >更新用户</a>
<br>
<a href="/student/delete" sec:authorize="hasAuthority('student:delete')" >删除用户</a>
<br>
<a href="/student/export" sec:authorize="hasAuthority('student:export')" >导出用户</a>
<br>
<br><br><br>
<h2><a href="/logout">退出</a></h2>
<br>
</body>
</html>

重启，此时的效果：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/95846.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CNN 01(CNN简介)

CNN 01(CNN简介)

一、卷积神经网络的发展 convolutional neural network 在计算机视觉领域&#xff0c;通常要做的就是指用机器程序替代人眼对目标图像进行识别等。那么神经网络也好还是卷积神经网络其实都是上个世纪就有的算法&#xff0c;只是近些年来电脑的计算能力已非当年的那种计算水平…
阅读更多...
JavaScript -【第二周】

JavaScript -【第二周】

文章来源于网上收集和自己原创&#xff0c;若侵害到您的权利&#xff0c;请您及时联系并删除~~~ 理解什么是流程控制&#xff0c;知道条件控制的种类并掌握其对应的语法规则&#xff0c;具备利用循环编写简易ATM取款机程序能力 运算符语句综合案例 1. 运算符 算术运算符赋值运…
阅读更多...
时间语义与窗口

时间语义与窗口

时间语义 在Flink中&#xff0c;时间语义分为两种 &#xff1a; 处理时间和事件时间。时间语义与窗口函数是密不可分的。以窗口为单位进行某一段时间内指标统计&#xff0c;例如想要统计8点-9点的某个页面的访问量&#xff0c;此时就需要用到了窗口函数&#xff0c;这里的关键…
阅读更多...
githubPage部署Vue项目

githubPage部署Vue项目

github中新建项目 my-web &#xff08;编写vue项目代码&#xff09; myWebOnline(存放Vue打包后的dist包里面的文件) 发布流程 &#xff08;假设my-web项目已经编写完成&#xff09;Vue-cli my-web vue.config.js文件中 const { defineConfig } require(vue/cli-service)…
阅读更多...
【LeetCode】3. 无重复字符的最长子串

【LeetCode】3. 无重复字符的最长子串

3. 无重复字符的最长子串&#xff08;中等&#xff09; 方法&#xff1a;滑动窗口 哈希表 思路 这道题主要用到思路是&#xff1a;滑动窗口 什么是滑动窗口&#xff1f; 其实就是一个队列,比如例题中的 abcabcbb&#xff0c;进入这个队列&#xff08;窗口&#xff09;为 ab…
阅读更多...
Python Opencv实践 - 轮廓检测

Python Opencv实践 - 轮廓检测

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/map.jpg") print(img.shape) plt.imshow(img[:,:,::-1])#Canny边缘检测 edges cv.Canny(img, 127, 255, 0) plt.imshow(edges, cmapplt.cm.gray)#查找轮廓 #c…
阅读更多...
DHorse v1.3.2 发布，基于 k8s 的发布平台

DHorse v1.3.2 发布，基于 k8s 的发布平台

版本说明 新增特性 构建版本、部署应用时的线程池可配置化&#xff1b; 优化特性 构建版本跳过单元测试&#xff1b; 解决问题 解决Vue应用详情页面报错的问题&#xff1b;解决Linux环境下脚本运行失败的问题&#xff1b;解决下载Maven安装文件失败的问题&#xff1b; 升…
阅读更多...
大学物理 之 安培环路定理

大学物理 之 安培环路定理

文章目录 前言什么是安培环路定理安培环路定理有什么作用 深入了解深入学习 前言 什么是安培环路定理 安培环路定理的物理意义在于描述了电流和磁场之间的相互作用&#xff0c;以及如何在一个封闭的回路中分析这种相互作用。 简单的来说 , 用环路定理来解决在磁场中B对任意封…
阅读更多...
【操作系统】一文快速入门，很适合JAVA后端看

【操作系统】一文快速入门，很适合JAVA后端看

作者简介&#xff1a; 目录 1.概述 2.CPU管理 3.内存管理 4.IO管理 1.概述 操作系统可以看作一个计算机的管理系统&#xff0c;对计算机的硬件资源提供了一套完整的管理解决方案。计算机的硬件组成有五大模块&#xff1a;运算器、控制器、存储器、输入设备、输出设备。操作…
阅读更多...
2022年下半年系统架构设计师真题（下午带答案）

2022年下半年系统架构设计师真题（下午带答案）

试题一 (25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…
阅读更多...
前端基础4——jQuery

前端基础4——jQuery

文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2…
阅读更多...
Vue2023 面试归纳及复习

Vue2023 面试归纳及复习

目录 1. Vue 3中的Composition API&#xff08;Hooks&#xff09;是什么&#xff1f;它与Options API有何不同&#xff1f; Composition API 的优势 2 Options API 语法格式 3 setup 语法糖 4 Vue3的生命周期 5. 请解释一下Vue 3中的Teleport&#xff08;传送&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023