springboot整合security和vue的实践

目录

• 环境
• 1.security参考资料

• 认证流程原理：

• 2.1获取登录用户信息
• 2.2自定义登入登出url
• 2.3自定义Handler返回json
• 2.4记住我功能
• 2.5验证码功能
• 2.6限制登录次数
• 2.7密码加密
• 2.8后台提供接口，返回前端json,整合vue做前端登入登出

 UserDetails userDetails = (UserDetails) SecurityContextHolder.getContext()
                .getAuthentication()
                .getPrincipal();

  .and()
                .formLogin()
                //指定url，可由相应的controller处理跳转到登录页如login_page.html
                .loginPage("/mylogin")//自定义登录url
                //指定自定义form表单请求的路径
                .loginProcessingUrl("/myloginForm").usernameParameter("userName").passwordParameter("passWord")
                //.defaultSuccessUrl("/success")
                .successForwardUrl("/success")//设置了登入登出的Handler,优先响应Handler
                .failureUrl("/fail")//设置了登入登出的Handler,优先响应Handler

 .and()
                .logout()
                .logoutUrl("/mylogout")//自定义退出url
                .logoutSuccessUrl("/mylogin")
                .logoutSuccessHandler(myLogoutSuccessHandle)//设置了登入登出的Handler,优先响应Handler
                .invalidateHttpSession(true)
                .permitAll()

export const login = data => {
  return http.post(`/myloginForm?userName=${data.userName}&passWord=${data.passWord}&rememberMe=${data.rememberMe}&imageCode=${data.imageCode}`)
}
export const logout = data => {
  return http.post(`/mylogout`)
}

<!--要与.loginProcessingUrl("/myloginForm")相对应-->
<form name="f" action="/myloginForm" method="post">
    <br/>
    用户名:
    <input type="text" name="userName" placeholder="name"><br/>
    密码:
    <input type="password" name="passWord" placeholder="password"><br/>
    <input type="text" name="imageCode">
    <img src="/createImageCode"><br/>
    <input type="checkbox" name="rememberMe"/>下次自动登录<br/>
    <input name="submit" type="submit" value="提交">
</form>
<form action="/mylogout" method="post">
    <input type="submit" class="btn btn-primary" value="注销"/><!-- 5 -->
</form>

//自定义认证成功或者失败的返回json
                .successHandler(myAuthenticationSuccessHandler)
                .failureHandler(myAuthenticationFailureHandler)
.logoutSuccessHandler(myLogoutSuccessHandle)//设置了登入登出的Handler,优先响应Handler

  http.exceptionHandling().authenticationEntryPoint(myAuthenticationEntryPoint);//未登录
        http.exceptionHandling().accessDeniedHandler(myAccessDeniedHandler); // 无权访问

.and()
                .rememberMe()// 记住我
                .rememberMeParameter("rememberMe")
                .tokenRepository(persistentTokenRepository())
                .userDetailsService(myUserDetailsService).tokenValiditySeconds(60 * 60 * 24);

/**
     * springSecurity会根据情况自动将token插入persistent_logins
     *
     * @return
     */
    @Bean
    public PersistentTokenRepository persistentTokenRepository() {
        JdbcTokenRepositoryImpl tokenRepository = new JdbcTokenRepositoryImpl();
        tokenRepository.setDataSource(dataSource);
        return tokenRepository;
    }

//将我们自定义的验证码过滤器，配置
//UsernamePasswordAuthenticationFilter之前http.addFilterBefore(validateCodeFilter, UsernamePasswordAuthenticationFilter.class)

public class AuthenticationSuccessEventListener implements ApplicationListener<AuthenticationSuccessEvent>
{}
public class AuthenticationFailureListener implements ApplicationListener<AuthenticationFailureBadCredentialsEvent> {}

export const login = data => {
  return http.post(`/myloginForm?userName=${data.userName}&passWord=${data.passWord}&rememberMe=${data.rememberMe}&imageCode=${data.imageCode}`)
}
export const logout = data => {
  return http.post(`/mylogout`)
}

.antMatchers( "/user/list").hasAuthority("admin")
                .antMatchers( "/user/list2").hasRole("manager")