vue实现单点登录

单点登录（SSO）的基本原理

单点登录允许用户通过一次身份验证访问多个相互信任的系统。在Vue中实现SSO通常需要与后端配合，常见的方案包括基于OAuth2.0、JWT或CAS协议。

基于OAuth2.0的实现

1. 配置认证服务器
   使用第三方服务（如Auth0、Keycloak）或自建OAuth2.0服务器。前端通过授权码模式（Authorization Code Flow）获取访问令牌。

2. Vue端集成
   安装vue-auth或@okta/okta-vue等库，配置重定向逻辑：

   import Auth from '@okta/okta-vue'
   Vue.use(Auth, {
     issuer: 'https://your-okta-domain/oauth2/default',
     clientId: 'your-client-id',
     redirectUri: window.location.origin + '/callback'
   })

3. 处理登录回调
   在路由中设置回调页面，解析授权码并交换令牌：

   

   this.$auth.handleAuthentication().then(() => {
     this.$router.push('/dashboard')
   })

基于JWT的实现

1. 后端签发JWT
   用户登录后，后端生成JWT并返回给前端，存储于localStorage或HttpOnly Cookie中。

2. Vue端验证令牌
   通过拦截器在每次请求时附加JWT：

   

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

3. 检查登录状态
   使用路由守卫验证令牌有效性：

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

跨域问题处理

1. CORS配置
   确保后端允许前端域名的跨域请求，设置Access-Control-Allow-Origin和Access-Control-Allow-Credentials。

2. 代理服务器
   开发环境下可通过vue.config.js配置代理：

   devServer: {
     proxy: 'http://your-backend-api.com'
   }

安全性注意事项

• 避免将敏感令牌存储在localStorage中，优先使用HttpOnly Cookie。
• 实现令牌刷新机制，防止过期中断。
• 后端需验证令牌签名和时效性。

通过以上方法，Vue应用可无缝集成SSO功能，提升用户体验和系统安全性。