前后端分离项目无法得到Spring Security 认证cookie而导致循环登录问题

谁践踏了优雅 2024-03-23 11:09 11阅读 0赞

#### 目录 ####

*  项目场景：
 *  问题描述
 *  原因分析：
 *  解决方案：

## 项目场景： ##

在前后端分离项目中，前端使用vue2，后端依赖添加了Spring Security安全框架，前端无法正常访问获取后端数据

--------------------

## 问题描述 ##

在进行前端发来数据，后端返回登录成功信息后，请求其他数据返回Spring Security默认登录页面的问题  
![1b9a063fe38943419126118c98cf8dee.png][]

## 原因分析： ##

我们可以回想一下，在后端添加Spring Security依赖后，除了个别放行的路由，其他的都会被拦截，并自动跳转到内置默认登录页面，如下  
![在这里插入图片描述][b5977c1b11284b95b04cd55956769e2d.png_pic_center]  
这个过程实际上就是请求被驳回并给你实现跳转了，我们可以通过Fiddller抓包看看  
我在未登录情况下去获取/user/currentName的数据，然后相应信息就给我返回了跳转login页面信息  
![在这里插入图片描述][e10ba20d9f0d4cbdab22f1d7438bf276.png]  
这个时候我们就不能想到，前端在请求信息的时候，返回的那一串前端页面代码就是Spring Security 内置的默认登录页面。

那为什么会导致整个问题呢，明明数据已经发送过去了，并且也登录成功了，为什么会被后端认为是没有登录，这个时候就一定是少了什么，我们再次通过Fiddller抓包看看

直接访问后端路由进行登录：  
![在这里插入图片描述][07af2c7abc7f474faec02d9e6a8bfa56.png_pic_center]  
通过前端实现登录：  
![在这里插入图片描述][34fcdf0459e24514860ae40402d58b22.png]  
其实这个时候我们就可以发现问题了，前端获取的响应头中缺少了**set-cookie**值，也就是说，后端没有给前端颁发认证cookie，导致前端没有获取登录用户的对应cookie，这样就会使每次请求都没有携带这个cookie，就无法做到身份认证，从而导致循环登录。

那为什么内置登录成功后端就颁发cookie？那是因为内置的登录页面属于前后端不分离的项目，后端在自家人登录，自然信任自家人给了它通行证，\*\*而在前后端分离项目中，我们是一定会出现跨域问题的！！！\*\*跨域就导致了不信任，后端就没有给前端发送cookie

--------------------

## 解决方案： ##

那么我们该如何使二者之间拥有信赖度，这就需要前后端一起努力了，我在这里以vue2作为前端示例

对于前端，我们需要在main.js中如下图一样设置withCredentials为true  
![在这里插入图片描述][a1228c07e15d4fd0bea657b905ae9812.png_pic_center]  
对于后端，我们不仅需要设置允许跨域访问，还需要设置发送cookie  
如下图  
![在这里插入图片描述][65381204bc9f468c9214a0761daad331.png_pic_center]  
还需要再我们的过滤链中添加这个跨域设置代码如下：

@EnableWebSecurity
    public class BlogWebSecurityConfiger     {
        
    
        // 自定义过滤链
        @Bean
        public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        
            http
                    .authorizeHttpRequests((auth) -> {
        
                        auth
                                .mvcMatchers("/user/login")
                                .permitAll()
                                .anyRequest()
                                .authenticated();
                    })
                    .cors()
                    .configurationSource(configurationSource())
                    .and()
                    .formLogin()
    				........
    
    	 return http.build();
        }
        // 解决跨域问题
        private CorsConfigurationSource configurationSource() {
        
            CorsConfiguration corsConfiguration = new
                    CorsConfiguration();
            // 设置接收cookie
            corsConfiguration.setAllowCredentials(true);
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            corsConfiguration.addAllowedOriginPattern("*");
            corsConfiguration.setMaxAge(3600L);
            UrlBasedCorsConfigurationSource source = new
                    UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**",
                    corsConfiguration);
            return source;
        }
    }

这样我们就解决了请求返回登录页面的问题了，来看看效果：

再次使用前端登录，后端也把cookie给到前端了  
![在这里插入图片描述][1ed7c7c5ebf9416f82bcfe2543556f7c.png_pic_center]  
而前端也会携带cookie去后端获取数据了![在这里插入图片描述][7615504ad03740d5aa9eee3be828aea8.png_pic_center]  
成功返回数  
![在这里插入图片描述][78928aeccc3f43e888a04887d2cb7dda.png_pic_center]

[1b9a063fe38943419126118c98cf8dee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/66b30a2d56db4378a1f7c986bef367ed.png
[b5977c1b11284b95b04cd55956769e2d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/45089f321d304c2d911f3cb8f818e9cd.png
[e10ba20d9f0d4cbdab22f1d7438bf276.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7981d5b8f36841fe89f606e653d4f847.png
[07af2c7abc7f474faec02d9e6a8bfa56.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7884aa4db9b3479f8f978566726311e1.png
[34fcdf0459e24514860ae40402d58b22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9090e0900b944ac2bda8f5c7ffdd1fcf.png
[a1228c07e15d4fd0bea657b905ae9812.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/47b98e8c7ba246128418357eaae4a357.png
[65381204bc9f468c9214a0761daad331.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b88399e778e34335ad1fe73bd45a3616.png
[1ed7c7c5ebf9416f82bcfe2543556f7c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/123981b64beb481d908a7226f666b527.png
[7615504ad03740d5aa9eee3be828aea8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/c36151770e9945ce8296b3563067cb14.png
[78928aeccc3f43e888a04887d2cb7dda.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/dee29e7170504d92a7e73d30dcf64830.png