当前位置：首页 > VUE

vue实现单点

2026-01-12 09:11:04VUE

Vue 实现单点登录（SSO）方案

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

基于 OAuth2/OpenID Connect 的实现

使用 oidc-client-js 库处理认证流程：

import { UserManager, WebStorageStateStore } from 'oidc-client'

const config = {
  authority: 'https://sso-provider.com',
  client_id: 'vue-app-client-id',
  redirect_uri: `${window.location.origin}/callback`,
  response_type: 'code',
  scope: 'openid profile',
  userStore: new WebStorageStateStore({ store: localStorage })
}

const userManager = new UserManager(config)

// 登录跳转
userManager.signinRedirect()

// 处理回调
userManager.signinRedirectCallback().then(user => {
  console.log('登录成功:', user.profile)
})

基于 JWT 的跨域方案

主域设置共享 Cookie

axios.post('https://auth-server.com/login', credentials, {
withCredentials: true // 允许跨域带cookie
})

子应用验证 Token

// 拦截器添加Token
axios.interceptors.request.use(config => {
const token = localStorage.getItem('sso_token')
if (token) config.headers.Authorization = `Bearer ${token}`
return config
})

基于 iframe 的父窗口通信

主应用维护登录状态，子应用通过 postMessage 同步：

// 主应用
window.addEventListener('message', event => {
  if (event.data.type === 'SSO_CHECK') {
    event.source.postMessage({
      type: 'SSO_STATUS',
      loggedIn: store.state.user.isAuthenticated
    }, event.origin)
  }
})

// 子应用
const checkLogin = () => {
  window.parent.postMessage({ type: 'SSO_CHECK' }, '*')
  window.addEventListener('message', event => {
    if (event.data.type === 'SSO_STATUS') {
      console.log('登录状态:', event.data.loggedIn)
    }
  })
}

服务端渲染(SSR)特殊处理

Nuxt.js 中需注意服务端 token 传递：

// plugins/sso.js
export default async ({ app, req }) => {
  if (process.server) {
    const token = req.headers.cookie?.match(/sso_token=([^;]+)/)?.[1]
    if (token) app.$axios.setToken(token, 'Bearer')
  }
}

安全注意事项

始终使用 HTTPS
设置合理的 token 过期时间
实现 CSRF 防护
敏感操作需二次验证
定期轮换加密密钥

调试技巧

开发时可使用代理解决跨域：

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

以上方案可根据实际业务需求组合使用，建议优先采用标准协议如 OAuth2。实施时需确保各系统间的信任域配置正确，并做好会话管理。

vue实现单点