SpringBootSecurity学习(12)前后端分离版之简单登录

前后端分离

前面讨论了springboot下security很多常用的功能,其它的功能建议参考官方文档学习。网页版登录的形式现在已经不是最流行的了,最流行的是前后端分离的登录方式,前端单独成为一个项目,与后台的交互,包括登录认证和授权都是由异步接口来实现。在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。这种应用模式比较适合纯网页应用,

但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口。

在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果。至于前端用户看到什么效果,从后端请求的数据如何加载到前端中,都由前端自己决定,网页有网页的处理方式,App有App的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。在前后端分离的应用模式中 ,前端与后端的耦合度相对较低。

在前后端分离的应用模式中,我们通常将后端开发的每个视图都称为一个接口,或者API,前端通过访问接口来对数据进行增删改查。

前后端分离出现的跨域问题

前后端分离后,出现的经典问题就是跨域问题。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源(域名,协议,端口)策略造成的,是浏览器对JavaScript施加的安全限制。具体的跨域理论跨域自行查询学习。在security中,解决跨域问题是非常简单的。只需要增加几行配置即可。

简单示例

来写一个简单的例子来实现前后端分离的异步登录。首先引入依赖:

修改springboot默认配置文件,添加默认用户:

启动类不用修改,添加一个接口:

下面来配置security配置类,首先配置登录,异步登录不再需要后台配置登录页面地址,只需要配置登录参数和api地址即可:

然后加上授权配置和登录成功的处理:

最后加上csrf配置:

最简单的配置已经完成了,最后来看一下登录成功的处理:

返回了一个json形式的登录成功消息。

简单测试

来进行一个简单的测试,启动项目,使用postman直接访问hello接口:

访问不成功,返回了登录的html页面,关于没有权限的处理,后面会做的更加友好。下面用接口进行登录:

可以看到正常登录成功,postman中也多了一个cookie信息:

这和浏览器的cookie是一样的,删掉以后就成了未登录状态。现在访问hello接口,可以看到正常的效果:

添加跨域

添加跨域配置非常简单,首先在security配置中调用cors方法:

然后我们打开springboot的官方文档,查看跨域配置:

可以看到,在springboot中,全局的跨域配置非常简单,我们来模仿写一个bean:

这样跨域就配置好了。

其它处理器

来看一下登录失败(比如账号错误)时的处理器:

配置登录失败处理器:

测试:

来看一下登录超时或者未登录的异常处理器:

配置登录超时或者未登录处理器:

测试,在未登录的情况下,直接访问hello接口:

现在提示友好了很多。最后看一下权限不足处理器:

配置权限不足处理器:

然后开启方法级别的权限注解,在hello方法上面配置HELLO权限:

在配置文件中,给默认用户admin配置一个其他角色:

然后重启项目,首先在postman中,进行登录,然后再访问hello接口:

此时就会根据处理器的结果提示权限不足。

说明

上面是一个简单的前后端分离的登录的例子。这里只应用了几个简单的功能,不过前面讨论过的从数据库中查询用户,动态权限,共享session,记住我等等的功能,也都可以加入到前后端分离的登录功能中,这些内容的使用和前面网页版的登录没有什么区别。使用这些完全可以满足前后端分离的登录和授权功能。

代码地址 : https://gitee.com/blueses/spring-boot-security 12

原文地址:https://www.cnblogs.com/guos/p/11617243.html

时间: 2024-07-29 23:27:43

SpringBootSecurity学习(12)前后端分离版之简单登录的相关文章

SpringBootSecurity学习(13)前后端分离版之JWT

JWT 使用 前面简单介绍了把默认的页面登录改为前后端分离的接口异步登录的方法,可以帮我们实现基本的前后端分离登录功能.但是这种基本的登录和前面的页面登录还有一个一样的地方,就是使用session和cookie来维护登录状态,这种方法的问题在于,扩展性不好.单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据共享,每台服务器都能够读取 session. 一种解决方案是 session 数据持久化,写入redis或别的持久层.各种服务收到请求后,都向持久层请求

springboot-vue前后端分离session过期重新登录的实现

springboot-vue前后端分离session过期重新登录的实现 简单回顾cookie和session cookie和session都是回话管理的方式 Cookie cookie是浏览器端存储信息的一种方式 服务端可以通过响应浏览器set-cookie标头(header,),浏览器接收到这个标头信息后,将以文件形式将cookie信息保存在浏览器客户端的计算机上.之后的请求,浏览器将该域的cookie信息再一并发送给服务端. cookie默认的存活期限关闭浏览器后失效,即浏览器在关闭时清除c

SpringBootSecurity学习(15)前后端分离版之 OAuth2.0简单示例

OAuth2.0 OAuth 引入了一个授权层,用来分离两种不同的角色:客户端和资源所有者.客户端来申请资源,资源所有者同意以后,资源服务器可以向客户端颁发令牌.客户端通过令牌,去请求数据.也就是说,OAuth 的核心就是向第三方应用颁发令牌.而且,OAuth 2.0 规定了四种获得令牌的流程.你可以选择最适合自己的那一种,向第三方应用颁发令牌. 具体的OAuth学习建议仔细研读阮一峰的教程, http://www.ruanyifeng.com/blog/2019/04/oauth_design

SpringBootSecurity学习(26)前后端分离版之github单点登录

单点登录(SSO) 关于oauth2.0,最后我们再来学习一下单点登录.前面介绍过单点登录的定义,单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 关于单点登录,springcloud G版本的官方文档地址如下: https://cloud.spring.io/spring-cloud-static/Greenwich.SR3/single/spring-cl

SpringBootSecurity学习(18)前后端分离版之 OAuth2.0 数据库(MyBatis)存储客户端

使用Mybatis查询客户端信息 前面的例子使用了默认的jdbc配置来动态从数据库查询客户端信息,下面来改用更加灵活的mybatis来实现,改用mybatis,首先pom中换成mybatis的依赖: 然后新建一个实体类,并实现查询需要的 ClientDetails 接口: 由于接口默认需要实现的方法有很多返回类型为集合类型的,所以这里的部分get方法做一些调整,例如: 其它的可以自行下载源代码查看.实体类建好以后,我们就可以查询客户端了: 实现 ClientDetailsService 接口 查

七个开源的 Spring Boot 前后端分离项目,一定要收藏!

前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年,SSH 框架用的滚瓜烂熟,出来却发现自己依然没有任何优势! 其实前后端分离本身并不难,后段提供接口,前端做数据展示,关键是这种思想.很多人做惯了前后端不分的开发,在做前后端分离的时候,很容易带进来一些前后端不分时候的开发思路,结果做出来的产品不伦不类,因此松哥这里给大家整理了几个开源的前后端分离项

前后端分离之后添加验证码

转载自:http://www.cnblogs.com/liminjun88/p/6556493.html#commentform 1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服务的方式,所以后台不止3个,画图示意.终极方案是采用Docker,在前端和后台调用中间添加一层:API Gateway. 因为考虑到和其他系统集成的可能性,所以在登录这一

为什么要进行前后端分离

传统开发模式与前后端分离模式对比 传统开发模式 前后端分离方式 对比以上两图我们可以看到,前后端分离方式流程简单多了. 前后端分离概念 简单来说就是后端提供API,前端调用API获取数据来渲染页面,当然这其中还有许多细节问题,比如跨域问题,接口数据格式约定问题等,这些以后详谈. 在开发阶段,当有新的需求时,前后端工程师约定好接口数据格式,就可以并行进行开发测试了,前端工程师不必等待后端的接口开发好了才开始工作,可以利用mock假数据等方式模拟接口返回数据(当然还有其他方式),前后端都开发好之后双

从壹开始前后端分离【 .NET Core2.0 Api + Vue 3.0 + AOP + 分布式】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

代码已上传Github,文末有地址 说接上文,上回说到了<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之八 || API项目整体搭建 6.3 异步泛型+依赖注入初探>,后来的标题中,我把仓储两个字给去掉了,因为好像大家对这个模式很有不同的看法,嗯~可能还是我学艺不精,没有说到其中的好处,现在在学DDD领域驱动设计相关资料,有了好的灵感再给大家分享吧. 到目前为止我们的项目已经有了基本的雏形,后端其实已经可以搭建自己的接口列表了,框架已