SpringBoot Security 自定义登录页面

╰半夏微凉° 2024-04-01 09:06 67阅读 0赞

#### 文章目录 ####

*  配置 HttpSecurity
 *  配置登录页
 *  自定义报错

引入 Security，参考文章： [SpringBoot Security 入门][SpringBoot Security]

## 配置 HttpSecurity ##

配置 SecurityFilterChain 的 HttpSecurity

*  **authorizeHttpRequests**：配置应用程序的哪些请求需要进行身份验证
 *  **antMatchers().permitAll()**：配置哪些目录下的资源不需要身份验证
 *  **formLogin**：开启登录页面配置
 *  **loginPage**：默认登录页面，注意这是个必填字段
 *  **loginPage().permitAll()**：如果不加上 permitAll()，自定义的登录页将无权限访问
 *  \*\*csrf().disable()\*\*关闭csrf防护

@Configuration
    public class SecurityConfig {
        
    
        @Bean
        public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        
            http
                    .authorizeHttpRequests()
                    .antMatchers("/assets/**", "/css/**","/images/**").permitAll()
                    .anyRequest()
                    .authenticated()
    
                    .and()
                    .formLogin()
                    .loginPage("/login")
                    .permitAll()
    
                    .and()
                    .csrf()
                    .disable();
            ;
            return http.build();
        }
    }

## 配置登录页 ##

**前端脚本** 存放目录可以按需设定，必须配置 antMatchers().permitAll() 开放权限

*  html 放于 templates 文件夹
 *  js 放于 static 下的 assets
 *  css 放于 static 下的 assets
 *  图片 放于 static 下的 images

![在这里插入图片描述][791637632e38431f95b1fd6d13f36bc8.png]

**controller** 配置登录

@Controller
    public class LoginController {
        
        
        @GetMapping("/")
        public String index() {
        
            log.info("进入 index 路由");
            return "index";
        }
    
        @GetMapping("/login")
        public String login() {
        
            log.info("进入 login 路由");
            return "login";
        }
    
    }

**login.html** 部分关键内容

*  使用了 thymeleaf 语法
 *  输入账号密码后，请求 POST 方法的 /login 接口，此方法在引入的 spring-boot-starter-security 包里

<div class="sufee-login d-flex align-content-center flex-wrap">
        <div class="container">
            <div class="login-content">
                <div class="login-logo">
                    <h1 style="color: #57bf95;">欢迎来到我的课堂</h1>
                </div>
                <div class="login-form">
                    <form th:action="@{/login}" method="post">
                        <div class="form-group">
                            <label>Username</label>
                            <input type="text" class="form-control" name="username" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" name="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-success btn-flat m-b-30 m-t-30" style="font-size: 18px;">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

**pom 文件** 引入 thymeleaf

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

否则会报错

> javax.servlet.ServletException: Circular view path \[login\]: would dispatch back to the current handler URL \[/login\] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)  
> at org.springframework.web.servlet.view.InternalResourceView.prepareForRendering(InternalResourceView.java:210) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:148) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:316) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1401) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1145) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1084) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:963) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006) ~\[spring-webmvc-5.3.16.jar:5.3.16\]  
> at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898) ~\[spring-webmvc-5.3.16.jar:5.3.16\]

成功

![在这里插入图片描述][681c8cd62a0f4754a431c8734054e1c2.png]

## 自定义报错 ##

**场景**：当账号密码错误或其他登录错误时，security 会重定向到登录页面，然而由于是重定向，无法返回具体错误信息

**解决思路**：抛出异常时，security 会把错误信息写入 session 里，我们需要在前端把 session 的值显示出来

错误 session 的 key 来自 WebAttributes 类的 AUTHENTICATION\_EXCEPTION

public final class WebAttributes {
        
        public static final String ACCESS_DENIED_403 = "SPRING_SECURITY_403_EXCEPTION";
        public static final String AUTHENTICATION_EXCEPTION = "SPRING_SECURITY_LAST_EXCEPTION";
        public static final String WEB_INVOCATION_PRIVILEGE_EVALUATOR_ATTRIBUTE = WebAttributes.class.getName() + ".WEB_INVOCATION_PRIVILEGE_EVALUATOR_ATTRIBUTE";
    
        private WebAttributes() {
        
        }
    }

模拟抛出异常

public class UserAuthProvider implements AuthenticationProvider {
        
    
        @Autowired
        private UserDetailsServiceImpl iUserDetailsService;
        @Autowired
        private IUserMapper userMapper;
    
        @Override
        public Authentication authenticate(Authentication authentication) throws AuthenticationException {
        
    
            throw new DisabledException("自定义报错");
    
        }
    
        @Override
        public boolean supports(Class<?> aClass) {
        
            return true;
        }
    
    }

登录页面添加报错显示

*  SPRING\_SECURITY\_LAST\_EXCEPTION：security 默认会把异常放到这个 session key 里

效果如下，这个 session 把错误类名都带上了，一般我们并不需要

![在这里插入图片描述][25e1a4bada61426f86472e1587e767ac.png]

加上去除类名的 js 代码

const text = $("#errorMsgInfo").text();
    	console.log(text);
    	if (text.length > 0) {
        
    		const textfix = text.split(':')[1];
    		console.log(textfix);
    		$("#errorMsgInfo").text(textfix);
    	}

成功返回报错  
![在这里插入图片描述][ce8fa5e7b4234254aa913a652ce1e213.png]

[SpringBoot Security]: https://blog.csdn.net/weixin_42555971/article/details/127422103
[791637632e38431f95b1fd6d13f36bc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5a3d9de504ac49f0809b995758c49ea7.png
[681c8cd62a0f4754a431c8734054e1c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/93f2255680dc487fbed1387b15c47cef.png
[25e1a4bada61426f86472e1587e767ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/901c39392481462392208516bdf25f64.png
[ce8fa5e7b4234254aa913a652ce1e213.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9384e82f72054a3299fb12c9dea9cb68.png