当前位置：首页 > VUE

vue实现sso

2026-01-07 08:31:22VUE

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

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

使用 OAuth2/OpenID Connect 协议

OAuth2 是 SSO 的常用协议，OpenID Connect 在其基础上扩展了身份认证功能。

安装依赖：

npm install vue-oidc-client  # 或使用 auth0-vue 等库

配置 OIDC 客户端：

// main.js
import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App)
app.use(
  createAuth0({
    domain: 'your-domain.auth0.com',
    clientId: 'your_client_id',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  })
)

登录按钮组件：

vue实现sso

<template>
  <button @click="login">Login</button>
</template>

<script>
import { useAuth0 } from '@auth0/auth0-vue';

export default {
  setup() {
    const { loginWithRedirect } = useAuth0();
    return { login: loginWithRedirect };
  }
}
</script>

使用 JWT 和跨域认证

前端处理 JWT 令牌：

// 存储 token
localStorage.setItem('token', response.data.access_token);

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

检查登录状态：

// 路由守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

使用 CAS 协议

重定向到 CAS 服务器：

vue实现sso

window.location.href = 'https://cas-server.com/login?service=' 
  + encodeURIComponent(window.location.origin + '/callback');

处理回调：

// 在回调页面
const ticket = new URLSearchParams(window.location.search).get('ticket');
if (ticket) {
  axios.post('/api/validate', { ticket }).then(res => {
    localStorage.setItem('token', res.data.token);
    router.push('/');
  });
}

注意事项

所有敏感操作需在后端验证 token
使用 HTTPS 保证传输安全
设置 token 过期时间和刷新机制
考虑实现全局登出功能，清除所有系统的会话

后端配合要求

后端需要实现：

Token 验证接口
用户信息获取接口
跨域支持（CORS）
会话管理

示例 Node.js 验证中间件：

function authenticate(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).send();

  jwt.verify(token, 'secret_key', (err, user) => {
    if (err) return res.status(403).send();
    req.user = user;
    next();
  });
}

以上方案可根据具体 SSO 提供商（如 Auth0、Okta、Keycloak 等）调整实现细节。