当前位置：首页 > VUE

vue单点登录实现

2026-03-09 01:17:08VUE

Vue 单点登录实现方案

单点登录（SSO）允许用户在多个应用系统中使用同一套凭证登录。以下是基于 Vue 的实现方案：

基于 OAuth2/OpenID Connect 的实现

配置认证服务器
选择 OAuth2 服务提供商（如 Keycloak、Auth0 或自建服务），注册客户端应用并获取以下信息：
- client_id
- redirect_uri
- 授权端点（如 authorization_endpoint）
- Token 端点（如 token_endpoint）
安装依赖库
使用 oidc-client-js 或 vue-oidc-client 库处理认证流程：
```
npm install oidc-client
```

初始化认证客户端
在 Vue 项目中创建认证配置：

import { UserManager } from 'oidc-client';

const config = {
  authority: 'https://auth-server.com',
  client_id: 'your-client-id',
  redirect_uri: 'http://localhost:8080/callback',
  response_type: 'code',
  scope: 'openid profile'
};
const userManager = new UserManager(config);

登录与回调处理

vue单点登录实现

触发登录跳转：
```
userManager.signinRedirect();
```

在回调页面（如 /callback）处理响应：

userManager.signinRedirectCallback().then(user => {
  console.log('登录成功', user);
  router.push('/');
});

Token 管理与请求拦截
使用 Axios 拦截器自动附加 Token：

axios.interceptors.request.use(config => {
  const user = await userManager.getUser();
  if (user) {
    config.headers.Authorization = `Bearer ${user.access_token}`;
  }
  return config;
});

基于 JWT 的简化实现

前端登录跳转
重定向到中央登录页并携带回调地址：

window.location.href = `https://sso-server.com/login?redirect=${encodeURIComponent(window.location.href)}`;

接收并存储 Token
在回调页面解析 URL 中的 JWT：

vue单点登录实现

const token = new URLSearchParams(window.location.hash.substring(1)).get('token');
if (token) {
  localStorage.setItem('sso_token', token);
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

Token 验证与续期
定期检查 Token 有效性：

setInterval(() => {
  axios.get('/api/validate-token').catch(() => {
    userManager.signinSilent(); // 静默续期
  });
}, 300000);

跨域 Cookie 方案

配置后端服务
确保后端 API 启用 CORS 并设置 Cookie 属性：

Access-Control-Allow-Origin: https://your-vue-app.com
Access-Control-Allow-Credentials: true
Set-Cookie: sso_token=xxx; SameSite=None; Secure

前端请求配置
在 Axios 中启用凭据：
```
axios.defaults.withCredentials = true;
```

登录状态检查
通过专用接口验证登录状态：

axios.get('https://sso-server.com/check-auth').then(res => {
  if (!res.data.loggedIn) {
    window.location.href = 'https://sso-server.com/login';
  }
});