当前位置：首页 > VUE

vue 实现单点登录

2026-02-10 18:31:26VUE

单点登录（SSO）概念

单点登录是一种身份验证机制，允许用户通过一次登录访问多个相互信任的应用系统。Vue 作为前端框架，通常需要与后端（如 OAuth2、JWT 等）配合实现 SSO。

基于 JWT 的实现方案

1. 登录流程

用户访问 Vue 应用，前端检查本地是否存在有效的 JWT Token。
若未登录，跳转至统一认证中心（如 /login 页面）。
认证中心验证用户身份后生成 JWT，返回给前端并存储（如 localStorage 或 cookie）。

2. Token 验证与刷新

前端在每次请求时通过 axios 拦截器附加 Token：

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

后端验证 Token 有效性，过期时返回 401，前端跳转至登录页或自动刷新 Token。

基于 OAuth2 的实现方案

1. 授权码模式（推荐）

Vue 应用跳转至 OAuth2 服务商（如 Keycloak、Auth0）的登录页。
用户授权后，服务商返回授权码至前端指定回调地址（如 /callback）。
前端通过授权码向后端交换 Token，后端完成最终验证。

2. 隐式模式（纯前端）

适用于无后端的场景，OAuth2 直接返回 Token 到前端。
需注意 Token 存储在 sessionStorage 避免 XSS 攻击。

跨域与 Cookie 处理

若 SSO 涉及跨域，需配置后端支持 CORS 并设置 withCredentials: true：
```
axios.defaults.withCredentials = true;
```
确保 Cookie 的 SameSite 和 Secure 属性符合安全要求。

安全注意事项

避免前端直接存储敏感信息（如用户密码）。
JWT 应设置合理的过期时间，并实现自动刷新逻辑。
使用 HTTPS 防止中间人攻击。

示例代码片段

Vue 路由守卫检查登录状态

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

通过上述方案，Vue 可灵活实现单点登录，具体选择取决于后端架构和安全需求。

vue 实现单点登录