在现代的前端开发中，单点登录（SSO）是一个非常重要的需求。特别是在不同域名的应用之间，我们常常需要实现一个统一的登录机制。通过使用iframe和Token的方式，可以高效地实现不同Vue项目之间的单点登录。
一、背景介绍
假设我们有两个不同的Vue项目，分别部署在不同的域名上：
- 项目A：https://project-a.com
- 项目B：https://project-b.com
我们希望在项目A中登录后，能够在项目B中自动登录，并且在这两个项目之间传递用户的Token。
二、实现步骤
- 用户在项目A登录 当用户在项目A中输入用户名和密码并点击登录后，我们将会向后台发送一个请求，后台验证用户信息，成功后返回用户的Token。
```javascript // 假设我们用axios进行请求 import axios from 'axios';
async function login(username, password) { try { const response = await axios.post('https://api.project-a.com/login', { username, password }); const token = response.data.token;
// 保存Token到localStorage
localStorage.setItem('userToken', token);
// 通过iframe跳转到项目B
window.location.href = `https://project-b.com?token=${token}`;
} catch (error) {
console.error('登录失败：', error);
}
} ```
- 在项目B中接收Token 当用户跳转到项目B时，我们需要解析URL中的Token并存储在localStorage中。
```javascript // 在项目B的mounted钩子中 mounted() { const urlParams = new URLSearchParams(window.location.search); const token = urlParams.get('token');
if (token) {
// 存储Token
localStorage.setItem('userToken', token);
// 此处可以进行Token的验证，如向后台发送请求确认Token有效性
this.verifyToken(token);
}
},
methods: {
async verifyToken(token) {
try {
const response = await axios.get('https://api.project-b.com/verify', {
headers: { Authorization: Bearer ${token} }
});
if (response.data.valid) {
// Token有效，用户登录成功
console.log('登录成功！');
// 这里可以进行其他逻辑，如跳转到项目B的首页
} else {
console.error('Token无效！');
}
} catch (error) {
console.error('验证Token失败：', error);
}
}
}
```
- 关于安全性 当涉及到Token的传递时，我们需要注意安全性。最好的做法是使用HTTPS来保证数据传输的安全性，并且可以在Token中加入过期时间和签名，确保Token不能被伪造。
另外，可以考虑使用window.postMessage进行跨域通信，这样可以在不同域名的页面之间安全地传递信息，而不是通过URL参数。
javascript
// 在项目A中
window.frames[0].postMessage(token, 'https://project-b.com');
javascript
// 在项目B中
window.addEventListener('message', (event) => {
if (event.origin === 'https://project-a.com') {
const token = event.data;
localStorage.setItem('userToken', token);
this.verifyToken(token);
}
});
三、总结
通过使用iframe或者postMessage API，我们可以实现不同域名Vue项目之间的单点登录和Token传递。这种方式虽然简单有效，但我们仍需重视安全性，合理使用Token并控制它的生命周期。同时，随着OAuth2.0和JWT等技术的普及，单点登录的实现方式也越来越多样化，可以根据实际需求进行选择和实现。
