当前位置：首页 > VUE

单点登录vue 实现

2026-03-28 21:13:08VUE

单点登录（SSO）在Vue中的实现方法

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

基于OAuth2.0/OpenID Connect的实现

使用oidc-client-js库实现OAuth2.0/OpenID Connect协议：

安装依赖：

npm install oidc-client

创建auth服务模块：

// src/auth/authService.js
import { UserManager, WebStorageStateStore } from 'oidc-client'

const config = {
  authority: 'https://your-identity-provider.com',
  client_id: 'your-client-id',
  redirect_uri: 'http://localhost:8080/callback',
  response_type: 'code',
  scope: 'openid profile',
  userStore: new WebStorageStateStore({ store: window.localStorage })
}

const userManager = new UserManager(config)

export const login = () => userManager.signinRedirect()
export const logout = () => userManager.signoutRedirect()
export const getUser = () => userManager.getUser()

路由守卫配置

在Vue路由中配置全局守卫：

// src/router/index.js
import { getUser } from '@/auth/authService'

router.beforeEach(async (to, from, next) => {
  const user = await getUser()
  if (to.matched.some(record => record.meta.requiresAuth) && !user) {
    return next('/login')
  }
  next()
})

登录回调处理

创建回调页面组件：

// src/views/Callback.vue
<script>
import { userManager } from '@/auth/authService'

export default {
  async created() {
    try {
      const user = await userManager.signinRedirectCallback()
      this.$router.push(user.state || '/')
    } catch (error) {
      console.error('Callback error:', error)
      this.$router.push('/login')
    }
  }
}
</script>

前端Token管理

实现axios拦截器自动添加token：

// src/api/axios.js
import { getUser } from '@/auth/authService'

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

静默刷新Token

配置authService实现token自动刷新：

// 在authService.js中添加
userManager.events.addAccessTokenExpired(() => {
  userManager.signinSilent()
    .then(user => console.log('Token refreshed'))
    .catch(err => console.error('Refresh failed', err))
})

与后端配合要点

确保后端服务：

实现标准的OAuth2.0授权端点
支持CORS配置
提供正确的元数据端点（如/.well-known/openid-configuration）
设置适当的token有效期和刷新策略

替代方案：基于SAML的实现

如需使用SAML协议，可考虑：

npm install saml2-js

但需要注意SAML通常需要后端服务支持，前端主要负责重定向和参数传递。

本地开发配置

开发环境需配置：

单点登录vue 实现

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend.com',
        changeOrigin: true
      }
    }
  }
}

以上方案可根据实际身份提供商（如Auth0、Keycloak、Azure AD等）调整配置参数。实现时需特别注意token存储的安全性，推荐使用HttpOnly Cookie或内存存储替代localStorage。