简单模拟-前端的单点登录（SSO）

问题：什么是前端的SSO？

答案：前端单点登录（Single Sign On，简称 SSO）是一种身份验证机制，允许用户通过一次登录认证来访问多个相互信任的应用程序或网站，而无需在每个应用程序或网站中单独进行身份验证。

test流程：

1.修改hosts文件，文件位置：C:\WINDOWS\system32\drivers\etc，用笔记本打开hosts文件

注：（hosts文件是一个计算机操作系统中的文本文件，用于映射主机名与IP地址之间的关系。编辑hosts文件通常需要管理员权限，而且由于hosts文件是一个手动维护的映射表，所以当域名或IP地址发生变化时，需要手动更新hosts文件。）

 2.自己在hosts文件中底部，添加如下，不要修改其他的，保存

3.先在桌面创建一个文件夹text

 4.利用vite，创建两个不同名字的vue项目

 4.1 在根路径上test上输入cmd，回车 输入pnpm create vite my-vue-app --template vue，依次执行下面1-4

 4.2，双开cmd，加快效率，重复，得到如下文件

4.3用pnpm run dev ，上面已经进行了操作，启动不要关闭，最小化即可

 5.打开谷歌浏览器浏打开开始在hosts文件中设置的http://news.long.com:5173/和http://sports.long.com:5174/，改下long就行

 5.1 控制台输 document.cookie='name:junylong'，存储cookie

 5.2打开应用cookice，我这是中文的，可看见存储的name

 5.3另外一个项目拿到name,document.cookie 得到为空，因为上个页面是存在了上个页面，也仅限上个页面可以访问，所以为空

 5.4利用cookice的属性Domain ，Domain 指定了 Cookie 可以送达的主机名。假如没有指定，那么默认值为当前文档访问地址中的主机部分（但是不包含子域名）

 我们设置的 Domain 就是 .long.com，这样无论是 a.long.com 还是 b.long.com 都可以使用 Cookie。建立在一个共同的主域名之下,那么它们就可以通过这种方式来实现单点登录

在这里注意的是，不能跨域设置 Cookie，比如阿里域名下的页面把 Domain 设置成百度是无效的

代码如下：输入：document.cookie='age:18; Domain=long.com'

5.5查看存储的数据，输入document.cookie 拿到数据

 

 

 6.模拟结束

总结：

利用 Cookie 的这个特点，没错，我们只需要将Cookie的domain属性设置为父域的域名（主域名），同时将 Cookie的path属性设置为根路径，将 Session ID（或 Token）保存到父域中。这样所有的子域应用就都可以访问到这个Cookie，就如上面示例。