【SpringBoot】(四)SpringBoot + SpringSecurity + Thymeleaf 整合

在 SpringBoot 工程中,借用 SpringSecurity 权限框架来对登录用户所拥有的不同的权限来显示不同的页面。并且,如果有用户已登录,则右上角显示用户名和其角色。如下图:

admin 用户权限最大,显示所有页面内容:
【SpringBoot】(四)SpringBoot + SpringSecurity + Thymeleaf 整合_第1张图片
zzc 用户只有两个角色权限,所以,只显示部分内容:
【SpringBoot】(四)SpringBoot + SpringSecurity + Thymeleaf 整合_第2张图片

没有用户登录时,页面显示如下:
【SpringBoot】(四)SpringBoot + SpringSecurity + Thymeleaf 整合_第3张图片
【首页】、【登录】下方的内容都没有显示。

好了,需求已经了解清楚了,那咱们就直接上代码了哈。【文末有源码】


【开发环境】:

  • IDEA-2020.2
  • SpringBoot-2.5.5
  • MAVEN-3.5.3
  • SpringSecurity
  • Thymeleaf

项目结构图

后台:

【SpringBoot】(四)SpringBoot + SpringSecurity + Thymeleaf 整合_第4张图片
前台:

【SpringBoot】(四)SpringBoot + SpringSecurity + Thymeleaf 整合_第5张图片
1、引入依赖:

<dependency>
  <groupId>org.springframework.bootgroupId>
  <artifactId>spring-boot-starter-webartifactId>
dependency>

<dependency>
  <groupId>org.springframework.bootgroupId>
  <artifactId>spring-boot-starter-securityartifactId>
dependency>

<dependency>
  <groupId>org.springframework.bootgroupId>
  <artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

<dependency>
  <groupId>org.thymeleaf.extrasgroupId>
  <artifactId>thymeleaf-extras-springsecurity5artifactId>
dependency>

2、添加 application.yml 配置:

spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/  # 配置模板(非必要) 默认是 templates
    suffix: .html

3、后台路由控制器 RoutingController

@Controller
public class RoutingController {

    @GetMapping({"/", "/index"})
    public String index() {
        return "index";
    }

    @GetMapping("/toLogin")
    public String toLogin() {
        return "views/login";
    }

    @GetMapping("/level1/{id}")
    public String level1(@PathVariable("id") int id) {
        return "views/level1/" + id;
    }

    @GetMapping("/level2/{id}")
    public String level2(@PathVariable("id") int id) {
        return "views/level2/" + id;
    }

    @GetMapping("/level3/{id}")
    public String level3(@PathVariable("id") int id) {
        return "views/level3/" + id;
    }

}

4、SpringSecurity 配置类 SecurityConfig

使用 SpringSecurity 需要添加一个配置类:

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    // 授权
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // 1.配置请求授权规则
        // 首页所有人可以访问;其它页面需要相应的角色权限才能访问
        http.authorizeRequests()
                .antMatchers("/").permitAll()
                .antMatchers("/level1/**").hasRole("vip1")
                .antMatchers("/level2/**").hasRole("vip2")
                .antMatchers("/level3/**").hasRole("vip3");

        // 2.没有权限,默认会跳转到登录页面,需要开启登录页面
        http.formLogin()
        // 自定义登录页面
        .loginPage("/toLogin").usernameParameter("name").passwordParameter("pwd").loginProcessingUrl("/login");
        // 关闭csrf
        http.csrf().disable();
        // 3.注销,跳转到首页
        http.logout().logoutSuccessUrl("/");
    }

    // 认证
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        // inMemoryAuthentication:从内存中认证;jdbcAuthentication:从数据库中认证
        // BCryptPasswordEncoder:密码编码规则,如果没有设置,则登录时会报错
        auth.inMemoryAuthentication().passwordEncoder(new BCryptPasswordEncoder())
                .withUser("zzc").password(new BCryptPasswordEncoder().encode("66666")).roles("vip1", "vip3")
                .and()
                .withUser("admin").password(new BCryptPasswordEncoder().encode("admin")).roles("vip1", "vip2", "vip3");
    }

}
  • configure(HttpSecurity http):配置了访问哪些 url,需要相对应的角色
  • configure(AuthenticationManagerBuilder auth):配置了哪些用户有哪些角色

5、前台首页 index.html

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>首页title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
head>
<body>
<div id="container">
    <div id="nav" class="clearfloat">
        <div class="nav" id="first_page"><a th:href="@{/index}">首页a>div>
        <div class="nav" id="logout" sec:authorize="isAuthenticated()">
            <div>
                用户名:<span sec:authentication="name">span>
                角色:<span sec:authentication="principal.authorities">span>
            div>
            <a th:href="@{/logout}">注销a>
        div>
        <div class="nav" id="login" sec:authorize="!isAuthenticated()">
            <a th:href="@{/toLogin}">登录a>
        div>
    div>
    <div id="middle">div>
    <div id="bottom">
        <div class="box" sec:authorize="hasRole('vip1')">
            <div>Level1div>
            <a href="/level1/1">level1-1a>
            <a href="/level1/2">level1-2a>
            <a href="/level1/3">level1-3a>
        div>
        <div class="box" sec:authorize="hasRole('vip2')">
            <div>Level2div>
            <a href="/level2/1">level2-1a>
            <a href="/level2/2">level2-2a>
            <a href="/level2/3">level2-3a>
        div>
        <div class="box" sec:authorize="hasRole('vip3')">
            <div>Level3div>
            <a href="/level3/1">level3-1a>
            <a href="/level3/2">level3-2a>
            <a href="/level3/3">level3-3a>
        div>
    div>
div>
body>
html>

这段代码:

<div class="nav" id="logout" sec:authorize="isAuthenticated()">
    <div>
        用户名:<span sec:authentication="name">span>
        角色:<span sec:authentication="principal.authorities">span>
    div>
    <a th:href="@{/logout}">注销a>
div>

当用户登录后,就显示用户名和角色

这段代码:

<div class="box" sec:authorize="hasRole('vip1')">
    <div>Level1div>
    <a href="/level1/1">level1-1a>
    <a href="/level1/2">level1-2a>
    <a href="/level1/3">level1-3a>
div>

只有角色是 vip1 的时候,才显示其内容

6、登录页面 login.html

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1>登录页面h1>
<form method="post" th:action="@{/login}">
    用户名:<input type="text" name="name" /><br>
    密码:<input type="password" name="pwd" /><br>
    <input type="submit" value="登录" />
form>
body>
html>

【注意】:这里的登录后台接口是 /login,但是,在我们自己的后台接口中是没有这个接口的,它是通过 SpringSecurity 进行处理的。

所以,我们 SecurityConfig#configure(HttpSecurity http) 方法中有如下代码:

 http.formLogin()
        // 自定义登录页面
   	.loginPage("/toLogin").usernameParameter("name").passwordParameter("pwd").loginProcessingUrl("/login");

7、页面内容 1.html

level1/level2/level3 文件夹下的 html 文件内容基本一致,如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <h1>level1-1h1>
body>
html>

这里就不重复粘贴了哈。

源代码已上传至码云

你可能感兴趣的:(SpringBoot,spring,boot,java,intellij-idea)