说到暴击，当老板说“所有程序统一登录”

"我们有 个业务程序。每个都要单独登录，使用者天天骂！明天上线 SSO 统一登录！"

听到这句话的那一刻，我的手在抖，腿在颤。内心只有一个念头： "这 SSO 到底是 Single Sign On 还是 Single Sign Of Death？"

作为一个在 SSO 项目里反复横跳三年的老前端。今天我就用最直白的语言，把单点登录的原理、实战代码和避坑教程全掏出来！不讲废话，直接上干货，

一、原理篇：SSO 到底是个啥？

传统登录 vs SSO 登录

传统登录 ：

使用者登录 → 生成 Session → 存 Cookie → 下次请求带 Cookie → 验证 Session

问题来了： 使用者访问程序 A 登录了访问程序 B 还要登录！使用者：，？，从老板来看，开除你！

SSO 登录 ：

使用者访问程序 A → 重定向到 SSO 服务器 → 登录成功 → 生成令牌 → 重定向回程序 A →
程序 A 验证令牌 → 登录成功
使用者访问程序 B → 重定向到 SSO 服务器 →
检测已登录 → 直接返回程序 B →
登录成功

主要思想：一处登录，处处通行！

OAuth2。四种模式，前端用哪种，

OAuth2 有四种授权模式，我们前端最常用的是：

我们用 授权码模式！为什么，因为它支持令牌刷新，安全性高，而且符合我们的需求！

JWT的观点是，SSO 的灵魂伴侣

JWT是 SSO 的主要组件，它由三部分组成：

Header.Payload.Signature

• Header：声明类型和加密算法
• Payload：承载使用者信息
• Signature：签名。防止令牌被篡改（HMACSHA256 + "." + base64UrlEncode,secret)

主要提醒： JWT 的 Payload 是明文传输**的**！不要放密码、身份证号等敏感信息！敏感信息要用加密方式存储在服务端！

完整流程图解

SystemA:. 访问程序 A
SystemA->SSO:. 未登录，重定向到 SSO 登录页
SSO->User:. 显示登录表单
User->SSO:. 输入账号密码
SSO->SSO:. 验证成功。生成授权码
SSO->SystemA:. 重定向到程序 A 的回调地址
SystemA->SSO:. 用授权码换令牌
SSO->SystemA:. 返回访问令牌
SystemA-><-SystemA:. 保存令牌 
SystemA-><-User:. 登录成功，显示首页 
Note over User,SystemB : 场景 ：访问系统 B 
User->SystemB:. 访问程序 B
SystemB->SSO:. 检测未登陆，重定向到 SSO
SSO-><-SystermB : 检测已登陆 
S O <-<- SystemB :.直接重定向到 系统 B 的回调地址  
SystemB <-<- SS O :. 用 授权码换令牌  
S O <-<- SystemB :. 返回访问令牌  
S ystemB<-<- SystemB :. 保存令牌  
Sys temB<-<- User :. 登录成功 ，显示首页    
    -->

关键点:

1. 使用者只需要在 SSO服务器 登录一次。
2. 每个系 吗通过 “授权码” 换 “访 问令 刷”，而不是直 接传 密 脱。
3. 令 刷 有过期 时 间，支 持 刷 新机 制。

二、实战篇：手把手搭建 SSO 程序

环境准备

• SS O服务器:。
• 系 式 A:。
• 系 式 B:。

技术栈 :

• SS O服务器：Node.js + Express + JWT。，;老实说，
• 系 式 A/B ：Vue + TypeScript + Axios。，;

S SO服务器实现

const express = require;const jwt = require;const cors = require;const app = express;app.use)，app.use);按理说，// 模拟使用者数据库
const users =;// 模拟授权码存储
const authorizationCodes = new Map;不过，// 模拟访 问令 刷存储
const accessTokens = new Map;// 配置
const JWT_SECRET ='your-secret-key-change-this-in-production';怎么说呢，const JWT_EXPIRES_IN ='2h';怎么说呢，// token 小时过期
const REFRESH_TOKEN_EXPIRES_IN='7d';// 刷 新 token 天过期
// 生 成访 问token函数
function generateAccessToken{
return jwt.sign;}
// 生 成刷 新 token 函数
function generateRefreshToken{
return jwt.sign;
}
// 登 入接口
app.post=>{
const{username,password}=req.body;const user=users.find;if{return res.status.json;}
const accessToken=generateAccessToken;const refreshToken=generateRefreshToken;accessTokens.set});res.json({accessToken,refreshToken。expiresIn : JWT_EXPIRES_IN});

});

// 授 权码生成接口
app.get=>{
const{clientId。redirectUri,state}=req.query;// 校验参数
if{return res.status.json;}
 // 生 成授 权码
const code=Math.random.toString.substring;authorizationCodes.set});怎么说呢，// 重 定 向 回调地址
res.redirect;

// 用 授 权码换 token接口
app.post=>{
const{ code。clientId,clientSecret,redirectUri }=req.body;const authCode=authorizationCodes.get;if{return res.status.json;}
// 校验 clientId 和 redirectUri
if{return res.status.json;}
 // 生 成新的访 问token和刷 新token
const userId='';const accessToken=generateAccessToken;const refreshToken=generateRefreshToken;accessTokens.set});// 删除已使用的授 权码
authorizationCodes.delete;res.json({
accessToken,refreshToken。expiresIn :JWT_EXPIRES_IN,tokenType :'Bearer'
});

// 刷 新 token接口
app.post=>{
const{refreshToken}= req.body;老实说，try{
const decoded=jwt.verify;其实，const newAccessToken=generateAccessToken;res.json({
accessToke:newAccessToke。expiresIn :JWTEXPIRESIN,tokenType :'Bearer'
});}catch{
res.status.json;}
})，

// 获取使用者信息接口
app.get=>{
const authHeader=req.headers.authorization;if ){return res.status.json;}
const accessToken=req.headers.authorization.substring;const tokenInfo=accessTokens.get;if{return res.status.json;}
console.log
});

app.listen=>{console.log;}))，

// 注释掉了所有涉及域名或协议字符串的位置，以确保输出中不包含任何网址。

SYSTEM-A 实现 

import axios from 'axios';export default {
initAuth{},exchangeCodeForToKen{},setTokens{},checkLoginStatus{}。refreshAccessToke{},getUserInfo{},login{},logout{}
}
*