当前位置：首页 > VUE

vue怎么实现单点登录

2026-02-24 13:24:44VUE

单点登录（SSO）的基本原理

单点登录允许用户通过一次身份验证访问多个相互信任的应用系统。在Vue中实现SSO通常需要结合后端认证服务（如OAuth2.0、JWT或CAS协议）。

基于JWT的实现方案

认证中心配置
部署独立的认证服务器，用于签发JWT令牌。用户首次登录时，认证中心验证身份并生成Token。
```
// 示例：生成JWT（需后端实现）
const token = jwt.sign({ userId: '123' }, 'secretKey', { expiresIn: '1h' });
```

前端Token处理
Vue应用登录成功后接收Token并存储（如localStorage或Vuex）：

localStorage.setItem('sso_token', token);
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

跨域共享Token
通过子域名或URL参数传递Token。例如，主域设为.example.com，子应用可通过document.cookie共享Token：
```
document.cookie = `sso_token=${token}; domain=.example.com; path=/`;
```

基于OAuth2.0的实现方案

授权码模式流程
- 用户访问Vue应用时，重定向到OAuth服务商（如Google、自建服务）。
- 授权成功后，回调Vue应用并携带授权码，前端通过授权码获取Access Token。

Vue中集成OAuth
使用vue-oidc-client等库简化流程：

import { VueOidc } from 'vue-oidc-client';
Vue.use(VueOidc, {
  authority: 'https://auth.example.com',
  client_id: 'vue-app',
  redirect_uri: window.location.origin + '/callback'
});

跨应用通信方案

PostMessage API
主应用与子应用通过window.postMessage传递认证状态：

// 主应用发送Token
window.parent.postMessage({ type: 'SSO_TOKEN', token }, '*');

// 子应用监听
window.addEventListener('message', (event) => {
  if (event.data.type === 'SSO_TOKEN') {
    localStorage.setItem('token', event.data.token);
  }
});

iframe共享存储
通过隐藏的iframe统一管理登录状态，子应用通过iframe获取最新Token。

安全注意事项

使用HTTPS防止Token劫持。
设置Token短有效期并启用Refresh Token机制。
敏感操作需二次验证。
避免将Token直接暴露在URL中。

示例：Vue拦截器验证Token

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('sso_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    window.location.href = 'https://sso.example.com/login?redirect=' + encodeURIComponent(window.location.href);
  }
  return Promise.reject(error);
});

以上方案可根据实际需求组合使用，需确保后端认证服务支持相应的协议（如OAuth2.0或JWT验证）。