单点登录前端实现（web单点登录实现）

## 单点登录前端实现### 简介单点登录（Single Sign-On，SSO）是一种用户认证机制，允许用户只需登录一次，即可访问多个相互信任的应用系统。 SSO 极大提升了用户体验，避免了在不同应用系统之间重复输入用户名和密码的繁琐操作。本文将主要介绍如何在前端实现单点登录。### 单点登录流程典型的单点登录流程如下：1.

用户访问应用系统 A

: 用户尝试访问应用系统 A，应用系统 A 检测到用户未登录。 2.

重定向到认证中心

: 应用系统 A 将用户重定向到认证中心，并携带请求信息。 3.

用户登录认证

: 用户在认证中心输入用户名和密码进行登录。 4.

生成 Ticket

: 认证中心验证用户身份后，生成一个 Ticket（票据），并将 Ticket 信息返回给应用系统 A。 5.

验证 Ticket

: 应用系统 A 收到 Ticket 后，向认证中心验证 Ticket 的有效性。 6.

允许访问

: 认证中心验证 Ticket 有效后，允许应用系统 A 放行用户访问。 7.

用户访问应用系统 B

: 用户访问应用系统 B 时，应用系统 B 检测到用户未登录，同样会将用户重定向到认证中心。 8.

验证 Ticket

: 认证中心检测到用户已经登录，直接返回 Ticket 给应用系统 B。 9.

允许访问

: 应用系统 B 验证 Ticket 后，允许用户访问。### 前端实现方案#### 1. 基于 Cookie 的实现

原理:

认证中心设置一个特殊的 Cookie，所有应用系统共享该 Cookie。应用系统可以通过读取该 Cookie 判断用户是否已登录。

优点:

实现简单，成本低。

缺点:

安全性较低，容易受到跨站请求伪造（CSRF）攻击。

不同域名下 Cookie 无法共享，需要特殊处理。#### 2. 基于 Token 的实现（推荐）

原理:

认证中心生成一个 JWT（JSON Web Token），并将其存储在浏览器的 LocalStorage 或 SessionStorage 中。应用系统可以通过读取该 Token 判断用户是否已登录，并获取用户信息。

优点:

安全性高，可以有效防止 CSRF 攻击。

跨域支持良好。

缺点:

实现相对复杂。

需要考虑 Token 的过期时间和刷新机制。### 代码示例 (基于 Token 的实现)

认证中心:

```javascript // 生成 JWT const generateToken = (userInfo) => {const payload = {...userInfo,exp: Math.floor(Date.now() / 1000) + (60

60), // 设置过期时间为 1 小时};return jwt.sign(payload, SECRET_KEY); };// 登录成功后，生成 Token 并返回给前端 app.post('/login', (req, res) => {// ... 用户认证逻辑if (user) {const token = generateToken(user);res.json({ token });} else {res.status(401).json({ message: 'Invalid credentials' });} }); ```

应用系统:

```javascript // 设置 axios 拦截器，在请求头中添加 Token axios.interceptors.request.use((config) => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);} );// 处理 401 错误，跳转到登录页面 axios.interceptors.response.use((response) => {return response;},(error) => {if (error.response && error.response.status === 401) {window.location.href = '/login';}return Promise.reject(error);} ); ```### 总结本文介绍了单点登录的基本概念、流程以及前端实现方案。在实际应用中，需要根据具体业务场景选择合适的方案，并进行相应的调整和优化。

单点登录前端实现

简介单点登录（Single Sign-On，SSO）是一种用户认证机制，允许用户只需登录一次，即可访问多个相互信任的应用系统。 SSO 极大提升了用户体验，避免了在不同应用系统之间重复输入用户名和密码的繁琐操作。本文将主要介绍如何在前端实现单点登录。

单点登录流程典型的单点登录流程如下：1. **用户访问应用系统 A**: 用户尝试访问应用系统 A，应用系统 A 检测到用户未登录。 2. **重定向到认证中心**: 应用系统 A 将用户重定向到认证中心，并携带请求信息。 3. **用户登录认证**: 用户在认证中心输入用户名和密码进行登录。 4. **生成 Ticket**: 认证中心验证用户身份后，生成一个 Ticket（票据），并将 Ticket 信息返回给应用系统 A。 5. **验证 Ticket**: 应用系统 A 收到 Ticket 后，向认证中心验证 Ticket 的有效性。 6. **允许访问**: 认证中心验证 Ticket 有效后，允许应用系统 A 放行用户访问。 7. **用户访问应用系统 B**: 用户访问应用系统 B 时，应用系统 B 检测到用户未登录，同样会将用户重定向到认证中心。 8. **验证 Ticket**: 认证中心检测到用户已经登录，直接返回 Ticket 给应用系统 B。 9. **允许访问**: 应用系统 B 验证 Ticket 后，允许用户访问。

前端实现方案

1. 基于 Cookie 的实现* **原理:** 认证中心设置一个特殊的 Cookie，所有应用系统共享该 Cookie。应用系统可以通过读取该 Cookie 判断用户是否已登录。 * **优点:** 实现简单，成本低。 * **缺点:*** 安全性较低，容易受到跨站请求伪造（CSRF）攻击。* 不同域名下 Cookie 无法共享，需要特殊处理。

2. 基于 Token 的实现（推荐）* **原理:** 认证中心生成一个 JWT（JSON Web Token），并将其存储在浏览器的 LocalStorage 或 SessionStorage 中。应用系统可以通过读取该 Token 判断用户是否已登录，并获取用户信息。 * **优点:*** 安全性高，可以有效防止 CSRF 攻击。* 跨域支持良好。 * **缺点:*** 实现相对复杂。* 需要考虑 Token 的过期时间和刷新机制。

代码示例 (基于 Token 的实现)**认证中心:**```javascript // 生成 JWT const generateToken = (userInfo) => {const payload = {...userInfo,exp: Math.floor(Date.now() / 1000) + (60 * 60), // 设置过期时间为 1 小时};return jwt.sign(payload, SECRET_KEY); };// 登录成功后，生成 Token 并返回给前端 app.post('/login', (req, res) => {// ... 用户认证逻辑if (user) {const token = generateToken(user);res.json({ token });} else {res.status(401).json({ message: 'Invalid credentials' });} }); ```**应用系统:**```javascript // 设置 axios 拦截器，在请求头中添加 Token axios.interceptors.request.use((config) => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);} );// 处理 401 错误，跳转到登录页面 axios.interceptors.response.use((response) => {return response;},(error) => {if (error.response && error.response.status === 401) {window.location.href = '/login';}return Promise.reject(error);} ); ```

总结本文介绍了单点登录的基本概念、流程以及前端实现方案。在实际应用中，需要根据具体业务场景选择合适的方案，并进行相应的调整和优化。