Springboot项目整合Thymeleaf和SpringSecurity

今天药忘吃喽~ 2023-01-13 04:15 215阅读 0赞

1、首先需要说明下版本，springboot版本为2.3.0，这个版本使用的Thymeleaf版本为thymeleaf-spring5:3.0.11，这个关系到页面中命名空间，如果页面中命名空间使用了旧版spring4会导致security无效。

2、整体目录结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70][]

3、添加pom依赖：

<dependencies>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-security</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>
    		
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-thymeleaf</artifactId>
    		</dependency>
            
    		<dependency>
    			<groupId>org.thymeleaf.extras</groupId>
    			<artifactId>thymeleaf-extras-springsecurity5</artifactId>
    		</dependency>
    
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-test</artifactId>
    			<scope>test</scope>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.security</groupId>
    			<artifactId>spring-security-test</artifactId>
    			<scope>test</scope>
    		</dependency>
    	</dependencies>

4、编写security配置类:

package com.hl.chapter36.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    
    /**
     * security配置类
     * 重写两个方法，认证和授权
     */
    @Configuration
    @EnableWebSecurity
    public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
        /**
         * 认证
         * 创建用户和用户的角色
         * 密码编码方式：BCryptPasswordEncoder
         *
         * @param auth
         * @throws Exception
         */
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception {
            // 因为没写数据库，所以此处从内存读取用户、密码
            auth.inMemoryAuthentication()
                    // 密码加密方式
                    .passwordEncoder(new BCryptPasswordEncoder())
                    // 用户名和密码
                    .withUser("demo").password(new BCryptPasswordEncoder().encode("demo"))
                    // 用户拥有的角色
                    .roles("vip1", "vip2", "vip3")
                    .and()
                    // 第一个普通用户
                    .withUser("vip1").password(new BCryptPasswordEncoder().encode("vip1"))
                    .roles("vip1")
                    .and()
                    // 第二个普通用户
                    .withUser("vip2").password(new BCryptPasswordEncoder().encode("vip2"))
                    .roles("vip2")
                    .and()
                    // 第三个普通用户
                    .withUser("vip3").password(new BCryptPasswordEncoder().encode("vip3"))
                    .roles("vip3");
        }
    
        /**
         * 授权
         * 确定用户在当前系统中是否能够执行某个操作，即用户拥有的功能权限
         * 链式编程
         *
         * @param http
         * @throws Exception
         */
        @Override
        protected void configure(HttpSecurity http) throws Exception {
    
            // 请求授权的规则
            // 首页所有人可以访问，功能页只有对应权限的人才能访问
            // http.authorizeRequests() 开始请求权限配置
            // antMatchers("/").permitAll()请求匹配"/"，所有用户都可以访问
            http.authorizeRequests()
                    // 首页所有人都能访问
                    .antMatchers("/").permitAll()
                    // level1目录下的只有vip1才能访问
                    .antMatchers("/level1/**").hasRole("vip1")
                    .antMatchers("/level2/**").hasRole("vip2")
                    .antMatchers("/level3/**").hasRole("vip3");
    
            // 没有权限默认会到登录页面
            // formLogin() 开始配置登录操作
            // loginPage("/toLogin") 设置登录页面的访问地址
            http.formLogin().loginPage("/toLogin").loginProcessingUrl("/login");
    
            // 防止跨站请求
            // 安全器令牌
            // 关闭CSRF功能
            http.csrf().disable();
    
            // 注销，跳转到首页
    //        http.logout().deleteCookies("remember").invalidateHttpSession(true);
            http.logout().logoutSuccessUrl("/toLogin");
    
            // 开启记住我功能 cookie
            http.rememberMe().rememberMeParameter("remember");
    
        }
    }

5、编写controller控制器类：

package com.hl.chapter36.web;
    
    import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class RouterController {
        @RequestMapping({"/", "/index"})
        public String index() {
            return "index";
        }
    
        @RequestMapping("/toLogin")
        public String toLogin() {
            return "login";
        }
    
        @RequestMapping("/level1/{id}")
        public String level1(@PathVariable("id") int id) {
            return "level1/" + id;
        }
    
        @RequestMapping("/level2/{id}")
        public String level2(@PathVariable("id") int id) {
            return "level2/" + id;
        }
    
        @RequestMapping("/level3/{id}")
        public String level3(@PathVariable("id") int id) {
            return "level3/" + id;
        }
    
    }

6、编写页面，需要注意的是index.html页面里命名空间要用springsecurity5，否则不能整合成功:

7、index.html页面代码：

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org"
          xmlns:sec="http://www.thymeleaf.org/extras/thymeleaf-extras-springsecurity5">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>首页</title>
        
        <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
        
    </head>
    <body>
    
    
    <div class="ui container">
    
        <div class="ui segment" id="index-header-nav" th:fragment="nav-menu">
            <div class="ui secondary menu">
                <a class="item" th:href="@{/index}">首页</a>
    
                
                <div class="right menu">
    
                    
                    
                    <div sec:authorize="!isAuthenticated()">
                        <a class="item" th:href="@{/toLogin}">
                            <i class="address card icon"></i> 登录
                        </a>
                    </div>
    
    
                    
                    <div sec:authorize="isAuthenticated()">
                        <a class="item">
                            用户名：<span sec:authentication="name"></span>
                            角色： <span sec:authentication="principal.authorities"></span>
                        </a>
                    </div>
    
                    <div sec:authorize="isAuthenticated()">
                        <a class="item" th:href="@{/logout}">
                            <i class="sign-out icon"></i> 注销
                        </a>
                    </div>
    
                    
                </div>
            </div>
        </div>
    
        <div class="ui segment" style="text-align: center">
            <h3>Spring Security Study </h3>
        </div>
    
        <div>
            <br>
            <div class="ui three column stackable grid">
    
                
                <div class="column" sec:authorize="hasRole('vip1')">
                    <div class="ui raised segment">
                        <div class="ui">
                            <div class="content">
                                <h5 class="content">Level 1</h5>
                                <hr>
                                <div><a th:href="@{/level1/1}"><i class="bullhorn icon"></i> Level-1-1</a></div>
                                <div><a th:href="@{/level1/2}"><i class="bullhorn icon"></i> Level-1-2</a></div>
                                <div><a th:href="@{/level1/3}"><i class="bullhorn icon"></i> Level-1-3</a></div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="column" sec:authorize="hasRole('vip2')">
                    <div class="ui raised segment">
                        <div class="ui">
                            <div class="content">
                                <h5 class="content">Level 2</h5>
                                <hr>
                                <div><a th:href="@{/level2/1}"><i class="bullhorn icon"></i> Level-2-1</a></div>
                                <div><a th:href="@{/level2/2}"><i class="bullhorn icon"></i> Level-2-2</a></div>
                                <div><a th:href="@{/level2/3}"><i class="bullhorn icon"></i> Level-2-3</a></div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="column" sec:authorize="hasRole('vip3')">
                    <div class="ui raised segment">
                        <div class="ui">
                            <div class="content">
                                <h5 class="content">Level 3</h5>
                                <hr>
                                <div><a th:href="@{/level3/1}"><i class="bullhorn icon"></i> Level-3-1</a></div>
                                <div><a th:href="@{/level3/2}"><i class="bullhorn icon"></i> Level-3-2</a></div>
                                <div><a th:href="@{/level3/3}"><i class="bullhorn icon"></i> Level-3-3</a></div>
                            </div>
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    
    </div>
    
    
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/semantic.min.js}"></script>
    
    </body>
    </html>

8、login.html页面代码：

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>登录</title>
        
        <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    </head>
    <body>
    
    
    <div class="ui container">
    
        <div class="ui segment">
    
            <div style="text-align: center">
                <h1 class="header">登录</h1>
            </div>
    
            <div class="ui placeholder segment">
                <div class="ui column very relaxed stackable grid">
                    <div class="column">
                        <div class="ui form">
                            <form th:action="@{/login}" method="post">
                                <div class="field">
                                    <label>Username</label>
                                    <div class="ui left icon input">
                                        <input type="text" placeholder="Username" name="username">
                                        <i class="user icon"></i>
                                    </div>
                                </div>
                                <div class="field">
                                    <label>Password</label>
                                    <div class="ui left icon input">
                                        <input type="password" name="password">
                                        <i class="lock icon"></i>
                                    </div>
                                </div>
                                <div class="field">
                                    <input type="checkbox" name="remember">记住我
                                </div>
    
                                <input type="submit" class="ui blue submit button"/>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    
            <div style="text-align: center">
                <div class="ui label">
                    </i>注册
                </div>
    
            </div>
            <div class="ui segment" style="text-align: center">
                <h3>Spring Security </h3>
            </div>
        </div>
    
    
    </div>
    
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/semantic.min.js}"></script>
    
    </body>
    </html>

9、level页面代码示例，可自行修改不同页面中的内容：

10、启动程序，在浏览器打开主页，未登录状态如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 1][]

11、点击登录，进入登录页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 2][]

12、使用vip1用户登录后，只能看到当前用户权限下的内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 3][]

13、注销后重新用demo用户登录，可以看到所有内容了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 4][]

14、[下载完整代码][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70]: /images/20221022/f3529531795744c89b834009474636aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 1]: /images/20221022/e27afe2c00b74989956561df8f91fd3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 2]: /images/20221022/cd5714efa48a4e76b82d29c9012eb2a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 3]: /images/20221022/95ad0c39fc8a41b8bb72d99b1f702de9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jpbmdsb25nX3dvcmxk_size_16_color_FFFFFF_t_70 4]: /images/20221022/327296baec804e31b19f2ad57d0e41d9.png
[Link 1]: https://github.com/binglongworld/springboot-demo.git