vue如何实现单点登录

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

单点登录允许用户通过一次身份验证访问多个系统。核心流程包括：

• 用户访问应用A，未登录时跳转至认证中心。
• 认证中心验证用户身份后生成全局会话并返回令牌（如JWT）。
• 用户携带令牌访问其他系统（如应用B），系统向认证中心校验令牌有效性。

Vue 中实现 SSO 的关键步骤

认证中心配置

部署独立的认证服务（如Keycloak、OAuth2服务），提供以下接口：

• /login：处理用户登录。
• /validate：验证令牌有效性。
• /logout：全局注销。

前端集成方案

1. 使用 OAuth2/OpenID Connect
通过库（如oidc-client-js）实现授权码模式：

import { UserManager } from 'oidc-client';

const config = {
  authority: 'https://auth-center.com',
  client_id: 'vue-app-client',
  redirect_uri: 'http://localhost:8080/callback',
  response_type: 'code',
  scope: 'openid profile'
};

const userManager = new UserManager(config);

// 登录跳转
userManager.signinRedirect();

// 回调处理
userManager.signinRedirectCallback().then(user => {
  console.log('Token:', user.access_token);
});

2. 令牌存储与校验

• 将令牌存入localStorage或Vuex：

  localStorage.setItem('sso_token', token);

• 每次请求API时附加令牌：

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

3. 跨域处理
配置代理或CORS：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://auth-center.com',
        changeOrigin: true
      }
    }
  }
};

4. 注销逻辑
调用认证中心注销接口并清除本地令牌：

userManager.signoutRedirect().then(() => {
  localStorage.removeItem('sso_token');
});

注意事项

• 令牌过期：需定期检查令牌有效期，通过refresh_token更新。
• 安全性：避免令牌泄露，推荐使用HttpOnly Cookie存储敏感信息。
• 跨域限制：确保认证中心和应用域名在允许列表内。

通过上述步骤，Vue应用可无缝集成SSO，提升用户体验与安全性。