单点登录(SSO)实战:基于Vue与Spring Boot的深度实现

一、SSO的本质价值与实现模型

在分布式系统架构中,单点登录(Single Sign-On)如同企业级应用的"万能钥匙",用户只需在统一认证中心完成一次身份验证,即可访问所有互信系统。其核心在于建立可信的令牌传递机制,我们选择JWT(JSON Web Token)作为载体,结合OAuth2简化模式实现轻量级SSO方案。

关键技术原理:

  1. 认证中心统一鉴权:独立部署的认证服务负责用户身份核验

  2. 令牌传播机制:使用数字签名的JWT保障令牌安全传输

  3. 跨域会话管理:通过Cookie+LocalStorage实现跨域状态同步

(图源网络,侵权删除)

二、前端Vue实现方案

1. 核心依赖配置

bash 复制代码
npm install axios vue-router js-cookie

2. 路由守卫实现鉴权

javascript 复制代码
// router/index.js
router.beforeEach((to, from, next) => {
  const token = Cookies.get('SSO_TOKEN');
  
  if (to.meta.requiresAuth) {
    if (!token) {
      // 重定向到认证中心
      window.location.href = `https://auth-center.com/login?redirect=${encodeURIComponent(window.location.href)}`;
    } else {
      // 验证令牌有效性
      axios.get('/api/verify_token', {
        headers: { 'Authorization': `Bearer ${token}` }
      }).then(() => next()).catch(() => {
        Cookies.remove('SSO_TOKEN');
        next('/login');
      });
    }
  } else {
    next();
  }
});

3. 令牌回调处理

javascript 复制代码
​​​​​​​// LoginCallback.vue
export default {
  mounted() {
    const token = this.$route.query.token;
    if (token) {
      Cookies.set('SSO_TOKEN', token, { expires: 1 });
      const redirect = decodeURIComponent(this.$route.query.redirect || '/');
      this.$router.push(redirect);
    }
  }
}

三、后端Java实现(Spring Boot)

1. Maven依赖

XML 复制代码
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.11.2</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. JWT工具类

java 复制代码
public class JwtUtil {
    private static final String SECRET_KEY = "your-256-bit-secret";
    private static final long EXPIRATION = 3600L * 1000; // 1小时

    public static String generateToken(String username) {
        return Jwts.builder()
                .setSubject(username)
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION))
                .signWith(Keys.hmacShaKeyFor(SECRET_KEY.getBytes()))
                .compact();
    }

    public static Claims parseToken(String token) {
        return Jwts.parserBuilder()
                .setSigningKey(SECRET_KEY.getBytes())
                .build()
                .parseClaimsJws(token)
                .getBody();
    }
}

3. 认证中心接口

java 复制代码
@RestController
@RequestMapping("/auth")
public class AuthController {

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest request) {
        // 1. 执行用户名密码验证
        User user = userService.authenticate(request);
        
        // 2. 生成JWT令牌
        String token = JwtUtil.generateToken(user.getUsername());
        
        // 3. 返回带跳转地址的响应
        return ResponseEntity.ok(Map.of(
            "token", token,
            "redirect", request.getRedirectUrl()
        ));
    }
}

4. 业务系统鉴权拦截器

java 复制代码
public class JwtInterceptor implements HandlerInterceptor {
    
    @Override
    public boolean preHandle(HttpServletRequest request, 
                             HttpServletResponse response, 
                             Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (StringUtils.isEmpty(token)) {
            throw new AuthException("Missing authentication token");
        }
        
        try {
            Claims claims = JwtUtil.parseToken(token.replace("Bearer ", ""));
            request.setAttribute("username", claims.getSubject());
            return true;
        } catch (JwtException e) {
            throw new AuthException("Invalid token");
        }
    }
}

四、安全增强策略

  1. HTTPS强制传输:全链路启用SSL加密

  2. 双Token机制:AccessToken(短时效) + RefreshToken(长时效)

  3. 跨域安全配置

java 复制代码
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://your-domain.com")
                .allowCredentials(true)
                .allowedMethods("GET", "POST");
    }
}

五、典型问题排查指南

现象 排查方向 解决方案
跨域请求失败 CORS配置、Cookie作用域 检查Origin头、SameSite设置
Token无法解析 密钥一致性、编码格式 验证HS256算法和Base64编码
会话状态不同步 域名协议一致性、存储方式 确保二级域名相同,检查LocalStorage
相关推荐
新中地GIS开发老师2 分钟前
WebGIS开发入门 | 从 Web 开发到地图开发,差别在哪儿?
前端·vue·webgis
IMPYLH9 分钟前
HTML 的 <p> 元素
前端·javascript·html
leoZ23111 分钟前
第 4 篇:布局骨架——页面壳、栅格、卡片
前端·javascript·vue.js·opencv·计算机视觉·数据挖掘·语音识别
何以解忧,唯有..20 分钟前
Vue 3 模板语法详解:从插值到指令的完整指南
前端·javascript·vue.js
invicinble38 分钟前
【无标题】
前端
EasyGBS41 分钟前
从接入到稳定播放:无插件直播H5视频流媒体播放器EasyPlayer.js如何撑起Web端流媒体
开发语言·前端·javascript
不可能片场43 分钟前
nohup 之后进程还是死了:GUI 子进程的存活陷阱
前端·electron
名为沙丁鱼的猫7291 小时前
React/JSX 编码规范
前端·javascript·react.js
是吕先森1 小时前
【python】selenium实现web自动化测试
前端·python·selenium