vue 实现单点登录

单点登录（SSO）实现原理

单点登录允许用户通过一次身份验证访问多个系统。核心原理是用户首次登录后，认证中心颁发令牌（如Token），其他系统通过验证令牌实现免登录。

Vue中实现SSO的方案

基于OAuth2.0/OpenID Connect

使用标准化协议（如OAuth2.0）与认证服务器（如Keycloak、Auth0）交互：

1. 安装oidc-client库

   npm install oidc-client-js

2. 配置认证信息

   
   // auth.js
   import { UserManager } from 'oidc-client';

const config = { authority: 'https://sso.example.com', client_id: 'vue-app', redirect_uri: ${window.location.origin}/callback, response_type: 'code', scope: 'openid profile' };

export const userManager = new UserManager(config);

3. 登录跳转
```javascript
// Login.vue
import { userManager } from './auth';

methods: {
  login() {
    userManager.signinRedirect();
  }
}

1. 回调处理

   // Callback.vue
   async mounted() {
   try {
    const user = await userManager.signinRedirectCallback();
    localStorage.setItem('sso_token', user.access_token);
    this.$router.push('/');
   } catch (error) {
    console.error('SSO回调失败:', error);
   }
   }

基于JWT的跨域方案

适用于自有认证体系的场景：

1. 主域登录后设置Cookie

   document.cookie = `sso_token=${token}; domain=.example.com; path=/`;

2. 子应用检查Token

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

3. Token验证端点

   

   // 后端API需提供验证接口
   /api/verify-token

基于CAS协议

传统企业级方案：

1. 安装vue-cas插件

   npm install vue-cas

2. 全局配置

   
   import VueCas from 'vue-cas';

Vue.use(VueCas, { casUrl: 'https://cas.example.com', service: window.location.href });

3. 路由守卫验证
```javascript
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !Vue.$cas.isAuthenticated()) {
    Vue.$cas.login();
  } else {
    next();
  }
});

关键注意事项

• 跨域处理：确保认证服务器配置CORS白名单
• Token安全：使用HttpOnly、Secure标记的Cookie存储敏感令牌
• 会话同步：通过postMessage或StorageEvent实现子应用间状态同步
• 注销处理：需实现全局登出逻辑

  // 注销示例
  userManager.signoutRedirect({ post_logout_redirect_uri: window.location.origin });

调试技巧

1. 使用浏览器开发者工具检查网络请求和令牌传递
2. 验证JWT内容可通过jwt.io
3. 测试不同子域名下的Cookie共享情况

以上方案可根据实际技术栈选择实现，现代SSO推荐优先采用OAuth2.0/OpenID Connect标准协议。