单点登录(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
相关推荐
鹓于1 天前
PPT VBA随机选题系统实现详解
java·前端·javascript
Flittly1 天前
【SpringSecurity新手村系列】(1)初识安全框架
java·spring boot·安全·spring·安全架构
码界奇点1 天前
基于Spring Boot的插件化微服务热更新系统设计与实现
spring boot·后端·微服务·架构·毕业设计·源代码管理
前端双越老师1 天前
OpenClaw 实战记录:前端 VS 全栈 招聘岗位分析
前端·agent·全栈
Bigger1 天前
第八章:我是如何剖析 Claude Code 里的“电子宠物”彩蛋的
前端·ai编程·源码阅读
码界奇点1 天前
基于Spring Boot与Vue的教务管理系统设计与实现
vue.js·spring boot·后端·java-ee·毕业设计·源代码管理
我登哥MVP1 天前
【SpringMVC笔记】 - 5 - View
java·spring boot·spring·servlet·tomcat·maven·intellij-idea
qq_364371721 天前
NestJS + LangChain SSE 流式输出 + 前端实时渲染打字机效果
前端·langchain
1314lay_10071 天前
axios的Post方法和Delete方法的参数个数和位置不同,导致415错误
前端·javascript·vue.js·elementui
LXXgalaxy1 天前
HTML头部元信息避坑指南
前端·html