当前位置：首页 > VUE

vue实现单点登录

2026-01-16 18:03:03VUE

Vue 实现单点登录的方法

单点登录（SSO）允许用户通过一次登录访问多个关联系统。在 Vue 中实现 SSO 通常需要结合后端认证服务（如 OAuth2.0、JWT 或 CAS）。以下是几种常见实现方式：

基于 OAuth2.0 的实现

配置 OAuth 客户端 在 Vue 项目中集成 OAuth2.0 客户端库（如 vue-oidc-client 或 oidc-client-js），并配置授权服务器地址、客户端 ID 和回调 URL。

import { UserManager } from 'oidc-client-js';
const config = {
  authority: 'https://auth.example.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();
```

处理回调 在回调页面解析授权码并获取 Token：

userManager.signinRedirectCallback().then(user => {
  localStorage.setItem('token', user.access_token);
});

基于 JWT 的跨域方案

前端存储 Token 登录成功后，将后端返回的 JWT 存储到 localStorage 或 cookie：

axios.post('/api/login', credentials).then(response => {
  localStorage.setItem('jwt', response.data.token);
});

请求携带 Token 通过 Axios 拦截器自动附加 Token 到请求头：

vue实现单点登录

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

验证 Token 状态 使用路由守卫检查 Token 有效性：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('jwt');
  token ? next() : next('/login');
});

基于 CAS 的 SSO 集成

重定向到 CAS 服务器 在未登录时跳转至 CAS 的登录页：

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

验证 Ticket 在回调页面解析 CAS 返回的 Ticket 并向后端验证：

vue实现单点登录

const ticket = new URL(window.location.href).searchParams.get('ticket');
if (ticket) {
  axios.get(`/api/validate?ticket=${ticket}`).then(handleAuth);
}