经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » Java相关 » Spring » 查看文章
springboot整合security和vue的实践
来源：jb51　　时间：2021/9/22 8:36:34　　对本文有异议

环境

springboot1.5.9

完整代码，内有sql，先建库，在运行sql建表，sql中已插入测试的数据。

https://github.com/2010yhh/springBoot-demos/tree/master/springboot-security

在这里插入图片描述

访问首页：http://localhost:8080

1.security参考资料

Spring Security参考文档：https://docs.spring.io/spring-security/site/docs/4.1.0.RELEASE/reference/htmlsingle/#what-is-acegi-security

spring-security源码：https://github.com/spring-projects/spring-security/

主要功能：认证和授权

Configurer Filter 功能说明

CorsConfigurer CorsFilter 提供跨域访问配置支持的Filter

SessionManagementConfigurer SessionManagementFilter 会话管理Filter

RememberMeConfigurer RememberMeAuthenticationFilter 记住用户名及密码功能支持
ExpressionUrlAuthorizationConfigurer 

CsrfConfigurer CsrfFilter 跨站请求伪造保护Filter；

LogoutConfigurer LogoutFilter 退出登录请求处理Filter

FormLoginConfigurer UsernamePasswordAuthenticationFilter 表单登录请求处理Filter

OAuth2LoginConfigurer OAuth2AuthorizationRequestRedirectFilter OAuth2请求权限控制处理Filter，为其它网站提供本网站Oauth2方式登录，即其它网站通过本网站的账户密码进行登录授权

HttpBasicConfigurer BasicAuthenticationFilter Security基础登录授权Filter，将其结果保存在SecurityContextHolder中

认证流程原理：

参考：https://www.processon.com/view/link/5ac1e565e4b00dc8a026ab46

2.springboot整合security要点

主要是class WebSecurityConfig extends WebSecurityConfigurerAdapter

SecurityConfig配置信息，参考代码中的WebSecurityConfig类

2.1获取登录用户信息

  1.  UserDetails userDetails = (UserDetails) SecurityContextHolder.getContext()
  2.                 .getAuthentication()
  3.                 .getPrincipal();

2.2自定义登入登出url

1）SecurityConfig配置中配置：

  1.   .and()
  2.                 .formLogin()
  3.                 //指定url，可由相应的controller处理跳转到登录页如login_page.html
  4.                 .loginPage("/mylogin")//自定义登录url
  5.                 //指定自定义form表单请求的路径
  6.                 .loginProcessingUrl("/myloginForm").usernameParameter("userName").passwordParameter("passWord")
  7.                 //.defaultSuccessUrl("/success")
  8.                 .successForwardUrl("/success")//设置了登入登出的Handler,优先响应Handler
  9.                 .failureUrl("/fail")//设置了登入登出的Handler,优先响应Handler
  1.  .and()
  2.                 .logout()
  3.                 .logoutUrl("/mylogout")//自定义退出url
  4.                 .logoutSuccessUrl("/mylogin")
  5.                 .logoutSuccessHandler(myLogoutSuccessHandle)//设置了登入登出的Handler,优先响应Handler
  6.                 .invalidateHttpSession(true)
  7.                 .permitAll()

2）前端请求中改写请求的url

如vue请求：

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

如一般html表单请求：

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

2.3自定义Handler返回json

1）重写AuthenticationSuccessHandler、AuthenticationFailureHandler、LogoutSuccessHandler、AccessDeniedHandler、AuthenticationEntryPoint 这5个类，分别是登录成功、登录失败、退出成功、权限不足、尚未登录，在这几个重写类中自定义返回json格式

2）SecurityConfig配置中配置；

  1. //自定义认证成功或者失败的返回json
  2.                 .successHandler(myAuthenticationSuccessHandler)
  3.                 .failureHandler(myAuthenticationFailureHandler)
  4.                 
  5. .logoutSuccessHandler(myLogoutSuccessHandle)//设置了登入登出的Handler,优先响应Handler
  6.                
  1.   http.exceptionHandling().authenticationEntryPoint(myAuthenticationEntryPoint);//未登录
  2.         http.exceptionHandling().accessDeniedHandler(myAccessDeniedHandler); // 无权访问

2.4记住我功能

关掉浏览器，重新打开登录url，无需登录直接跳转到首页或其他页面

1）SecurityConfig配置中配置

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

2）SecurityConfig配置中配置写token入数据库的bean

  1. /**
  2.      * springSecurity会根据情况自动将token插入persistent_logins
  3.      *
  4.      * @return
  5.      */
  6.     @Bean
  7.     public PersistentTokenRepository persistentTokenRepository() {
  8.         JdbcTokenRepositoryImpl tokenRepository = new JdbcTokenRepositoryImpl();
  9.         tokenRepository.setDataSource(dataSource);
  10.         return tokenRepository;
  11.     }

2.5验证码功能

1）自定义验证码过滤器，在其中验证输入的验证码和保存在session中的验证码是否一致

2）SecurityConfig配置中配置

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

2.6限制登录次数

1）自定义登录成功、登录失败的事件监听器

  1. public class AuthenticationSuccessEventListener implements ApplicationListener<AuthenticationSuccessEvent>
  2. {}
  3. public class AuthenticationFailureListener implements ApplicationListener<AuthenticationFailureBadCredentialsEvent> {}

2）可以利用数据库或者redis或者换成来存储登录失败次数进行判断锁定账号

3）实际项目管理员角色应该有解锁账号的功能

2.7密码加密

1）新建用户时，存储密码为加密后的，本文使用BCryptPasswordEncoder

2）执行登录的过程中：security内部会对输入的密码加密和查询得到的用户的密码进行校验

2.8后台提供接口，返回前端json,整合vue做前端登入登出

这也是前后端分离的模式。

前端可以先获取当前登录用户的所有角色及所有权限（权限可以细化到菜单、按钮和接口）:进而决定前端显示效果

注意前端请求的url写法:

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

3.测试

三个用户：admin manager user2进行测试，本代码中权限没有用，只用到了角色这一级别。测试记住我功能时，要清除cookie，免得影响测试。

用户 角色 权限
admin admin manager user add delete query queryall update
manager manager user query queryall
user2 user query

对http://localhost:8080/user/list http://localhost:8080/user/list2 http://localhost:8080/user/list3（无需登录都可以访问） 三个url设置不同的角色

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

输入：http://localhost:8080 重定向到登录页：http://localhost:8080/#/login

2）输入admin manager user2 的正确用户名和密码后，登录成功返回的页面显示不同效果；三个用户登录成功后，直接访问url，会根据用户的角色不同进行拦截，点击退出后，重新回到http://localhost:8080/#/login

user2：

在这里插入图片描述

直接访问url:http://localhost:8080/user/list

在这里插入图片描述

manager:

在这里插入图片描述

直接访问url:http://localhost:8080/user/list

在这里插入图片描述

admin：

在这里插入图片描述

直接访问url:http://localhost:8080/user/list

在这里插入图片描述

直接访问注销url：

在这里插入图片描述

4）测试记住我
用admin用户测试
这里关闭浏览器或者重启进程后，直接访问需要角色的资源如：http://localhost:8080/#/home或者http://localhost:8080/user/list

可以直接访问无需登录。

在这里插入图片描述

但是访问首页http://localhost:8080 或者http://localhost:8080/#/login却不能跳转到http://localhost:8080/#/home

5）测试验证码

验证码过期或者输错或者刷新页面，会重新生成验证码。

在这里插入图片描述

6）测试限制登录次数

在输入正确验证码的情况下，输错验证码会直接抛出验证码的异常，连续输错3次（可以设置）用户名或者密码，账号会锁定，抛出账号锁定异常。

在这里插入图片描述

在这里插入图片描述

到此这篇关于springboot整合security和vue的实践的文章就介绍到这了,更多相关springboot整合security和vue内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Spring热门文章

  • 解决springboot+activemq启动报注解错误的问题
  • Springboot整合Rabbitmq之Confirm和Return机制
  • SpringBoot SpringEL表达式的使用
  • SpringBoot自动配置原理,你真的懂吗?(简单易懂)
  • Spring源码：Bean生命周期（终章）
  • Springboot-Management的项目实践
  • 解决springboot 启动找不到主类的问题
  • Spring5路径匹配器PathPattern解析
  • SpringAOP如何获取方法参数上的注解
  • java与es8实战之五：SpringBoot应用中操作es8(带安全检查：https、账号密码、API Key)

    • Spring推荐文章

  • SpringBoot Session共享，配置不生效问题排查 → 你竟然在代码里下毒！
  • 【Spring源码分析】Spring Scope功能中的动态代理 - Scoped Proxy
  • Spring AOP概念及原理
  • SpringBoot2.7还是任性的，就是不支持Logback1.3，你能奈他何
  • SpringBoot+ Sharding Sphere 轻松实现数据库字段加解密
  • Spring MVC 中视图的实现原理，在Spring MVC 中实现重定向和转发，以及访问静态资源 - Rainbow-Sea
  • Spring MVC 中 HttpMessageConverter 转换器 - Rainbow-Sea
  • SpringBoot+mail 轻松实现各类邮件自动推送
  • Spring MVC 获取三个域(request请求域，session 会话域，application 应用域)对象的方式 - Rainbow-Sea
  • SpringBoot3整合SpringDoc实现在线接口文档

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号