基于Vue+SpringCloudAlibaba微服务电商项目实战-构建会员服务-012：Vue如何解决SSO单点登录问题

2024-03-02 10:07:28

012：Vue如何解决SSO单点登录问题

1 Vue如何实现SSO单点登录效果演示

今日课程任务

如何基于Nginx部署Vue项目
Vue项目如何解决跨域的问题
Vue项目如何解决SSO的问题
唯一登录与单点登录的区别
SSO单点登录设计原理
分布式XXL-SSO单点登录框架源码分析

2 Vue项目如何实现快速部署

Vue可以简单理解为静态html+ajax

可以采用nginx部署将静态html放入到nginx的html目录即可
可以采用tomcat部署将静态html放入到webapps目录
建立最好采用nginx部署vue项目，因为nginx部署访问静态资源效率比tomcat高、

解决跨域核心原理
Vue中发出的ajax请求和浏览器访问的地址域名和端口号必须保持一致。
使用nginx根据项目名称实现反向代理。
127.0.0.1:80/vue nginx的html目录
127.0.0.1:80/api 反向代理到127.0.0.1:7070

Nginx配置

     location /api {
          proxy_pass    http://127.0.0.1:7070/;
          index  index.html index.htm;
     }

3 什么是SSO单点登录系统

什么是单点登录系统
在一个大型的互联网电商项目开发中，会根据业务拆分n多个子系统，如会员系统、订单系统、支付系统等，只要在其中一个子系统中登录之后其他子系统不需要重复登录，这就是单点登录系统。
实际案例：
蚂蚁课堂主站和蚂蚁课堂社区
百度旗下百度贴吧百度网盘百度知道

服务与系统之间区别
服务指的就是接口，系统包含接口、web视图层、管理系统

单点登录与唯一登录实现的区别
单点登录：只要在一个子系统登录成功之后其他的子系统都需要重复登录。
唯一登录：同一个渠道中，只能登录一次

4 Vue与Web开发实现SSO的区别

Vue适合的项目：嵌入在移动Web系统/企业级管理系统/或者是PC端不需要被搜索引擎收录的项目
Freemarker展示的网页源码类似伪静态，vue动态加载后端数据展示，对搜索引擎SEO不友好。
Vue项目一般就一个工程，调用后端接口，web系统

Vue与Web系统区别：
Vue属于前端技术；Vue项目一般就一个工程，调用后端接口展示数据
Web系统相当于java小型程序；后端程序一般分模块开发
Vue项目一般不存在单点登录问题，构建一个前端vue项目调用后端接口，vue调用会员服务登录成功之后会获得一个令牌保存到cookie中，在调其他接口的时候请求头中传递令牌绑定用户画像信息，功能类似session。

5 XXL-SSO框架的基本介绍

XXL-SSO 是一个分布式单点登录框架。只需要登录一次就可以访问所有相互信任的应用系统。
拥有”轻量级、分布式、跨域、Cookie+Token均支持、Web+APP均支持”等特性。现已开放源代码，开箱即用。

单点登录系统框架
https://github.com/xuxueli/xxl-sso xxl-sso
http://www.xuxueli.com/xxl-sso/#/ xxl-sso官方文档

下载项目xxl-sso-master，注释掉热部署依赖spring-boot-devtools，导入项目直接运行

需要在host文件中配置

127.0.0.1 xxlssoserver.com
127.0.0.1 xxlssoclient1.com
127.0.0.1 xxlssoclient2.com

分别启动项目xxlssoclient1，端口8081；xxlssoclient2，端口8082

访问http://xxlssoclient1.com:8081/xxl-sso-web-sample-springboot/
跳转到SSOServer端, 从SSOServer端登录成功回调到SSOClient会传递一个SessionId。
测试效果：

6 SSO基本的实现原理介绍

使用谷歌进入会员web登录、再使用火狐进入支付web，需要重新登录，原因是cookie不支持跨浏览器。
SSO单点登录实现方案有cookie和token两种形式，如果采用cookie方案实现必须要在同一个浏览器中。

SSOClient端源码解读：

XxlSsoWebFilter拦截 SSOClient端所有的请求
读取SSOClient域名下cookie的sessionid 信息检查是否失效
如果没有读取到sessionId信息，重定向跳转到SSO_Server端登录页面提供用户登录
调用doLogin请求实现登录，登录成功之后将用户信息写入redis和SSOServer端域名下面写入cookie信息

sessionid回传源码解读
SSOServer端重定向跳转到SSOClient传递sessionId

走SSOClient的过滤器，在过滤器中获取xxl_sso_sessionId，查询该sessionId在redis中是否存在，若存在表明账号已经登录成功过，再写在SSOClient域名下面。

7 sso如何实现不需要重复登录原理分析

SSOClient2.com和SSOClient1.com在同一个浏览器登录cookie共享，重定向跳转到SSOServer端后SSOServer端域名下面已经有写入cookie信息，不需要再让用户输入账号登录。
SSOServer端先校验是否有该cookie信息，若存在又跳转到SSOClient2将该sessionId传递给SSOClient2。
走SSOClient2的过滤器，在过滤器中获取xxl_sso_sessionId，查询该sessionId在redis中是否存在，若存在表明账号已经登录成功过，再写在SSOClient2域名下面。
该完整过程一共产生3个cookie信息，其中xxl_sso_sessionId都是完全一样的值。

8 SSO退出的源码解读

首先清除SSOClient端cookie信息，然后跳转到SSOServer端通知清除cookie信息和redis中sessionid记录，再跳转到登录页面。

9 SSO源码解读课程总结

1 实现SSO单点登录基于cookie实现，vue和web实现方式都是一样。
VUE项目前后端分离
绝大多数用于移动Web端或者企业级管理系统，不需要被搜索引擎搜索到。
移动端开发流行混合技术原生技术+H5组合

Vue会不会存在分模块开发管理系统？很少很少
Vue.member.com – 会员vue管理系统
Vue.pay.com --支付vue管理系统
假设vue分模块开发，单点登录实现思路和SSO流程一样。
2 如果浏览器禁用cookie，可以网址链接传token实现，思想一样。

码农公寓