（七）Spring Security基于ajax登录

Myth丶恋晨 2021-12-04 08:51 327阅读 0赞

### 目录 ###

*  一：修改form 表单
 *  二：创建一个登录接口
 *  三：自定义认证入口点（AuthenticationEntryPoint）
 *  四：最终配置
 *  五：项目地址

> spring security 最简单的登录莫过于form表单登录，但是要做到极致的交互式体验，还是需要用到ajax登录

首先我们借助于[（五）Spring Security基于数据库的权限授权][Spring Security]的登录页面

# 一：修改form 表单 #

1.  原表单：
    
        <form th:action="@{/login}" method="post">
            <div><label> User Name : <input type="text" name="username"/> </label></div>
            <div><label> Password: <input type="password" name="password"/> </label></div>
            <div><label> code: <input type="text" name="captcha"/> </label> <img src="/getCode" id="code" alt="验证码" onclick="refresh(this)"/></div>
            <label> <input type="hidden" name="uuid" id="uuid"/> </label>
            <div><input type="submit" value="Sign In"/></div>
        </form>
2.  修改后
    
        <form >
            <div><label> User Name : <input type="text" name="username"/> </label></div>
            <div><label> Password: <input type="password" name="password"/> </label></div>
            <div><label> code: <input type="text" name="captcha"/> </label> <img src="/getCode" id="code" alt="验证码" onclick="refresh(this)"/></div>
            <label> <input type="hidden" name="uuid" id="uuid"/> </label>
            <div><a  href="javascript:login();" >登录</a></div>
        </form>
        *********************************************************
         let  login=()=>{ 
            let username = $("input[name = 'username']");
            let password = $("input[name = 'password']");
            let captcha = $("input[name = 'captcha']");
            let uuid = $("input[name = 'uuid']");
            $.ajax({ 
                type : "POST",
                url : "/login",
                data : { 
                    "username" : username.val(),
                    "password" : password.val(),
                    "captcha" : captcha.val(),
                    "uuid" : uuid.val()
                },
        
                success: function(result){ 
                    if(result.code === 1){ 
                        window.location.href="/";
                    }else { 
                        alert('登录失败');
                    }
                },
                error : function(data) { 
                    alert("错误的用户或密码");
                },
                beforeSend : function() { 
                    if (username.val() === "") { 
                        alert("请输入用户名!");
                        username.focus();
                        return false;
                    }
                    if (password.val() === "") { 
                        alert("请输入密码!");
                        password.focus();
                        return false;
                    }
                }
            });
        };

# 二：创建一个登录接口 #

/** * 这个接口用来代替spring security的登录界面 */
        @GetMapping("/login_page")
        @ResponseBody
        public Object loginPage() { 
            return new BaseResult(ReturnCode.FAILED.getCode(), "尚未登录，请登录!");
        }

在WebSecurityConfig 里配置

@Override
        protected void configure(HttpSecurity http) throws Exception { 
            http
                    .authorizeRequests()
                    .antMatchers("/login","/login_page","/home","/getCode").permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .formLogin()
                    .loginPage("/login_page") /* 未登录的自动跳转到这个接口 */
                    .loginProcessingUrl("/login") /* 指定登录逻辑路径 ，由过滤器拦截*/
                    .successHandler(successHandler)
                    .failureHandler(failureHandler)
                    .and()
                    .logout()
                    .logoutSuccessUrl("/home");
            http.addFilterBefore(verifyCodeFilter, UsernamePasswordAuthenticationFilter.class);

# 三：自定义认证入口点（AuthenticationEntryPoint） #

由于配置的loginPage("/login\_page")跳转的页面是json数据，不是一个页面，所以问哦们需要自定义一个AuthenticationEntryPoint,

1.  AuthenticationEntryPoint的实现类有多种  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70]  
    AuthenticationEntryPoint在ExceptionTranslationFilter使用，  
    ExceptionTranslationFilter会截获AuthenticationException  
    或者AccessDeniedException异常，AuthenticationEntryPoint. Commence(…)就会被调用。  
    如下：源代码
    
        public class ExceptionTranslationFilter extends GenericFilterBean { 
            private AuthenticationEntryPoint authenticationEntryPoint;
        ......
        
            public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
                HttpServletRequest request = (HttpServletRequest)req;
                HttpServletResponse response = (HttpServletResponse)res;
        
                try { 
                    chain.doFilter(request, response);
                    this.logger.debug("Chain processed normally");
                } catch (IOException var9) { 
                    throw var9;
                } catch (Exception var10) { 
                    ......
        
                    this.handleSpringSecurityException(request, response, chain, (RuntimeException)ase);
                }
        
            }
        
            private void handleSpringSecurityException(HttpServletRequest request, HttpServletResponse response, FilterChain chain, RuntimeException exception) throws IOException, ServletException { 
                ......
                this.sendStartAuthentication(request, response, chain, (AuthenticationException)exception);
                ......
            }
        
            protected void sendStartAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, AuthenticationException reason) throws ServletException, IOException { 
                SecurityContextHolder.getContext().setAuthentication((Authentication)null);
                this.requestCache.saveRequest(request, response);
                this.logger.debug("Calling Authentication entry point.");
                /* 调用 */
                this.authenticationEntryPoint.commence(request, response, reason);
            }
        ......
2.  当用户访问受限的资源时跳转登录页面
    
        @Component
        public class UnauthorizedEntryPoint implements AuthenticationEntryPoint { 
            @Override
            public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException { 
                if(isAjaxRequest(request)){ 
                    response.sendError(HttpServletResponse.SC_UNAUTHORIZED,authException.getMessage());
                }else{ 
                    response.sendRedirect("/login");
                }
            }
        
            private boolean isAjaxRequest(HttpServletRequest request) { 
                return request.getHeader("X-Requested-With") != null&&request.getHeader("X-Requested-With").equals("XMLHttpRequest");
            }
        }

# 四：最终配置 #

1.  关闭crsf
    
        @Override
            protected void configure(HttpSecurity http) throws Exception { 
                http
                        .authorizeRequests()
                        .antMatchers("/login","/login_page","/home","/getCode").permitAll()
                        .anyRequest().authenticated()
                        .and()
                        .formLogin()
                        .loginPage("/login_page")
                        .loginProcessingUrl("/login")
                        .successHandler(successHandler)
                        .failureHandler(failureHandler)
                        .and()
                        .logout()
                        .logoutSuccessUrl("/home");
                //http.csrf().disable(); /* 关闭csrf，否则会拦截ajax请求 */ 
                kuhttp.exceptionHandling().authenticationEntryPoint(unauthorizedEntryPoint); /* 用来解决匿名用户访问无权限资源时的异常 */
                http.addFilterBefore(verifyCodeFilter, UsernamePasswordAuthenticationFilter.class);
            }
2.  开启crsf  
    crsf开启，会拦截ajax请求所以需要在请求中加入crsf参数  
    ![在这里插入图片描述][20190718123306845.png]  
    注意：需要在头部加入这些，否则无法创建session![在这里插入图片描述][20190718123332803.png]  
    示例  
    ![在这里插入图片描述][2019071812572515.gif]

# 五：项目地址 #

[Spring Security基于ajax登录][Spring Security_ajax]

[Spring Security]: https://blog.csdn.net/YCJ_xiyang/article/details/95317813
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70]: /images/20211204/ca52f6c4f1154d50888427b0889816fa.png
[20190718123306845.png]: /images/20211204/57629902a58b49d8b6dce1dc4306557f.png
[20190718123332803.png]: /images/20211204/523b42afd9c8491a95cd3f49151ec1c5.png
[2019071812572515.gif]: /images/20211204/aae1b0d8d0cf49eebce42a64357c8b98.png
[Spring Security_ajax]: https://gitee.com/xiyang_ycj/spring-security/tree/master/spring-security-seventh