单点登录（SSO）前端怎么做

最新推荐文章于 2025-06-16 19:30:00 发布

qq_42036203

最新推荐文章于 2025-06-16 19:30:00 发布

阅读量2.6k

点赞数 12

CC 4.0 BY-SA版权

文章标签：前端状态模式 SSO

本文链接：https://blog.csdn.net/qq_42036203/article/details/139502867

单点登录（SSO）前端怎么做

本文介绍单点登录（SSO）是什么，还有就是前端怎么做。

单点登录（SSO）是什么

cc4ac0c16bb94c77bf641a9946055ac4

单点登录（SSO，Single Sign On），是在企业内部多个应用系统（如考勤系统、财务系统、人事系统等）场景下，用户只需要登录一次，就可以访问多个应用系统。

同理用户只需注销一次，就可以从多个应用系统退出登录。

简单来说就是，一次登录，全部登录！一次注销，全部注销！！

方法1：父域Cookie

子级域名能共享主域名的Cookie，所以可以利用这个特性，在父级域名上设置Cookie就行了。

比如 tieba.baidu.com 和 map.baidu.com，它们都建立在 baidu.com 这个主域名之下，那么它们就可以通过这种方式来实现单点登录。

优点

此种实现方式比较简单

缺点

不支持跨主域名

方法2：认证中心

b9cda66e6465fe73773ac0624fa414f8

认证中心独立一个项目，登录后将Token存在本地存储中

应用系统检测Token，无Token就跳转到认证中心。认证中心先检测自己本地存储中的Token有效性，有效则跳转到应用系统并在url带上Token，否则跳转到认证中心登录页面，登录成功后跳转到应用系统并在url带上Token

应用系统拿到 Token 之后，写入到自己的本地存储中，在header上带上Token，服务端会校验Token的合法性

优点

支持跨主域名

扩展性好

缺点

会让系统多次重定向跳转，如果认证中心是spa应用，加载耗时也大

Token带在url存在泄露风险

介绍两款认证中心的开源实现

Apereo CAS 是一个企业级单点登录系统，其中 CAS 的意思是”Central Authentication Service“。它最初是耶鲁大学实验室的项目，后来转让给了 JASIG 组织，项目更名为 JASIG CAS，后来该组织并入了Apereo 基金会，项目也随之更名为 Apereo CAS。

XXL-SSO 是一个简易的单点登录系统，由大众点评工程师许雪里个人开发，代码比较简单，没有做安全控制，因而不推荐直接应用在项目中，这里列出来仅供参考。

方法3：iframe

利用iframe跨域，登录成功后给所有站点同步Token，退出时清除所有站点的Token。

在每个应用系统服务下放一个写入Token、移除Token的html文件

token.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script