vue+springboot前后端分离实现单点登录跨域问题处理.doc

基于 Vue 和 Spring Boot 的单点登录跨域问题处理 在近期的一次项目开发中，我们遇到了一个棘手的问题，那就是如何在 Vue 和 Spring Boot 的前后端分离架构中实现单点登录（SSO）。单点登录是指用户只需要登录一次，就可以访问到不同的应用系统，而不需要在每个系统中都登录一次。本文将详细介绍我们在实现单点登录过程中遇到的问题和解决方案。 跨域问题 在我们开始实现单点登录之前，我们需要解决的一个问题是跨域问题。因为我们的前端使用的是 Vue.js，而后端使用的是 Spring Boot，这两个技术栈之间的通信需要跨域请求。我们首先需要在 Spring Boot 项目中配置 CORS 来允许跨域请求。 在 Spring Boot 中，我们可以使用 `@Configuration` 注解来创建一个 CORS 配置类。在这个类中，我们可以使用 `WebMvcConfigurer` 来配置 CORS。 ```java @Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/") .allowedHeaders("*") .allowedMethods("*") .allowedOrigins("*"); } }; } } ``` 这个配置将允许所有的映射、所有的请求头、所有的请求方法和所有的源。但是，在我们重启项目后，我们发现浏览器控制台仍然报错，提示跨域问题。这是因为，我们的 CORS 配置虽然允许了跨域请求，但是我们的登录拦截器中还有一些问题。 登录拦截器 我们的登录拦截器是使用 Spring Boot 的 `HandlerInterceptor` 来实现的。在这个拦截器中，我们需要检查用户是否已经登录，如果用户已经登录，我们将允许请求继续执行。如果用户还没有登录，我们需要重定向用户到单点登录页面。 ```java public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 用户已经登录 if (request.getSession().getAttribute("user") != null) { return true; } // 从单点登录返回之后的状态，本系统还不处于登录状态 String state = request.getParameter("state"); String uri = getUri(request); if (isLoginFromSSO(state)) { String code = request.getParameter("code"); Object cacheUrl = request.getSession().getAttribute(state); if (cacheUrl == null) { response.sendRedirect(uri); return false; } // 获取 access token 和用户信息 HttpUtil client = new HttpUtil(); StringBuffer sb = new StringBuffer(); sb.append("code=").append(code) .append("&grant_type=").append("authorization_code") .append("&client_id=").append(SSOAuth.ClientID) .append("&client_secret=").append(SSOAuth.ClientSecret) .append("&redirect_uri=").append(URLEncoder.encode((String) cacheUrl)); String resp = client.post(SSOAuth.AccessTokenEndpoint, sb.toString()); // 处理 access token 和用户信息 } return false; } ``` 解决方案 为了解决跨域问题，我们需要在我们的登录拦截器中添加一个 OPTIONS 请求的处理。我们可以在拦截器中添加一个 `OPTIONS` 方法来处理这个请求。 ```java @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if ("OPTIONS".equals(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); return false; } // 其他逻辑 } ``` 此外，我们还需要在我们的 CORS 配置中添加一个 `allowedMethods` 来允许 OPTIONS 请求。 ```java registry.addMapping("/") .allowedHeaders("*") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedOrigins("*"); ``` 通过这些修改，我们终于解决了跨域问题 và 实现了单点登录。