vue 实现单点登录

Vue 实现单点登录的方法

单点登录（SSO）允许用户通过一次登录访问多个相关但独立的系统。以下是基于 Vue 的实现方案：

使用 OAuth2.0/OpenID Connect 协议

1. 集成认证库
   安装 oidc-client 或 vue-oidc-client 库，用于处理 OAuth2.0/OpenID Connect 流程。

   npm install oidc-client

2. 配置认证参数
   在 Vue 项目中创建认证配置文件（如 auth.js），设置授权服务器地址、客户端 ID 等参数。

   import { UserManager } from 'oidc-client';
   const config = {
     authority: 'https://sso.example.com',
     client_id: 'vue-client',
     redirect_uri: 'http://localhost:8080/callback',
     response_type: 'code',
     scope: 'openid profile'
   };
   export const userManager = new UserManager(config);

3. 登录与回调处理
   在登录页面触发 signinRedirect，在回调页面通过 signinRedirectCallback 获取令牌。

   // 登录触发
   userManager.signinRedirect();
   
   // 回调处理（通常在路由的 callback 页面）
   userManager.signinRedirectCallback().then(user => {
     localStorage.setItem('token', user.access_token);
   });

4. 路由守卫验证
   使用 Vue Router 的全局前置守卫检查用户是否已认证。

   

   router.beforeEach((to, from, next) => {
     if (to.meta.requiresAuth && !localStorage.getItem('token')) {
       next('/login');
     } else {
       next();
     }
   });

基于 Token 的跨域方案

1. 共享 Token 存储
   主域名下登录后，将 Token 存储在根域名 Cookie 或 localStorage 中，子应用通过读取共享 Token 实现自动登录。

   // 主应用设置 Cookie（根域名）
   document.cookie = `token=${token}; domain=.example.com; path=/`;

2. iframe 跨域通信
   使用 postMessage 在子应用 iframe 中传递 Token。

   // 主应用发送 Token
   window.frames['subapp'].postMessage({ token: 'xxx' }, 'https://subapp.example.com');
   
   // 子应用监听消息
   window.addEventListener('message', (event) => {
     if (event.origin === 'https://mainapp.example.com') {
       localStorage.setItem('token', event.data.token);
     }
   });

使用 CAS（Central Authentication Service）

1. 重定向到 CAS 服务器
   在未登录时跳转至 CAS 登录页，携带当前 Vue 应用的回调地址。

   

   const casLoginUrl = `https://cas.example.com/login?service=${encodeURIComponent(window.location.href)}`;
   window.location.href = casLoginUrl;

2. 验证 Ticket
   回调到 Vue 应用时，解析 URL 中的 ticket 参数，向 CAS 服务器验证有效性。

   // 解析 URL 参数
   const ticket = new URLSearchParams(window.location.search).get('ticket');
   if (ticket) {
     axios.get(`https://cas.example.com/validate?ticket=${ticket}`)
       .then(response => {
         if (response.data.valid) {
           localStorage.setItem('token', response.data.token);
         }
       });
   }

注意事项

• Token 安全性
  避免在客户端存储敏感信息，优先使用 HttpOnly Cookie 或短期有效的 JWT。

• 跨域限制
  确保各子系统域名在主域名下（如 app1.example.com 和 app2.example.com），或配置 CORS 策略。

• 注销同步
  实现全局注销时，需通知所有子应用清理本地状态。可通过广播事件或调用各应用的注销 API。

以上方案可根据实际场景组合使用，例如 OAuth2.0 + 跨域 Token 共享。核心流程均为通过中央认证服务验证身份，并在客户端间安全传递认证状态。