当前位置：首页 > VUE

vue 实现单点登录

2026-01-14 01:51:11VUE

Vue 实现单点登录的方法

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

使用 OAuth2.0/OpenID Connect 协议

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

配置认证参数
在 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);

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

// 登录触发
userManager.signinRedirect();

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

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

vue 实现单点登录

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

基于 Token 的跨域方案

共享 Token 存储
主域名下登录后，将 Token 存储在根域名 Cookie 或 localStorage 中，子应用通过读取共享 Token 实现自动登录。
```
// 主应用设置 Cookie（根域名）
document.cookie = `token=${token}; domain=.example.com; path=/`;
```

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）

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

vue 实现单点登录

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

验证 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);
      }
    });
}