vue+springboot의 프런트엔드와 백엔드를 분리하여 도메인 간 싱글 사인온을 달성하는 방법

코드는 다음과 같습니다.

@Configuration
public class CorsConfiguration {
 @Bean
 public WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurerAdapter() {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
      .allowedHeaders("*")
      .allowedMethods("*")
      .allowedOrigins("*");
   }
  };
 }
}

이 구성은 모든 매핑, 모든 요청 헤더, 모든 요청 방법 및 모든 소스를 허용합니다. 구성을 변경한 후 효과를 확인하기 위해 과감하게 프로젝트를 다시 시작했는데, 싱글 로그인 페이지로 리디렉션할 수 있는 방법이 없다는 것을 확인했습니다. 크로스 도메인으로 인해 브라우저 오류가 발생한 것을 보고 먼저 다음의 코드를 추가했습니다. 내 로그인 인터셉터

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
 //用户已经登录
 if (request.getSession().getAttribute("user") != null) {
  return true;
 }
 //从单点登录返回之后的状态，本系统还不处于登录状态
 //根据code值去获取access_token，然后再根据access_token去获取用户信息，并将用户信息存到session中
 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;
  }
  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.AccessTokenUrl, sb.toString());
  Map<String, String> map = new Gson().fromJson(resp, Map.class);
  //根据access_token去获取用户信息
  String accessToken = map.get("access_token");
  HttpUtil http = new HttpUtil();
  http.addHeader("Authorization", "Bearer " + accessToken);
  String encrypt = http.get(SSOAuth.UserUrl);
  String userinfo = decryptUserInfo(encrypt);
  //封装成user对象
  User user = new Gson().fromJson(userinfo, User.class);
  request.getSession().setAttribute("user", user);
  return true;
 }
 //跳转到单点登录界面
 state = Const._SSO_LOGIN + Const.UNDERLINE + RandomUtil.getUUID();
 request.getSession().setAttribute(state, uri);
 String redirectUrl = buildAuthCodeUrl(uri, state);
 response.sendRedirect(redirectUrl);
 return false;
}

window.location.href=this.$api.config.baseUrl+"/system/user/login"

를 사용하여 프런트 엔드 Vue를 직접 사용하여 백엔드 로그인 인터페이스를 요청하면 프런트 엔드가 시스템에 액세스하고 단일 로그인 페이지로 직접 이동할 수 있습니다. 그러나 내 계정과 비밀번호를 입력하고 로그인을 클릭했을 때 시스템으로 다시 돌아갔고 모든 요청 데이터 인터페이스에 정상적으로 액세스할 수 없음을 발견했습니다. 디버그에서는 모든 요청이 사용자 정보를 전달하지 않고 인터셉터에서 로그인되지 않아 모든 요청을 통과할 수 없습니다.

나는 왜 분명히 로그인되어 있고 인터셉터도 세션에 사용자 정보를 설정합니까? 왜 쿠키가 사라 집니까? 다시 요청을 보냈더니 각 요청의 JsessionId가 다르다는 걸 확인했습니다. 많은 정보를 확인한 결과 프런트 엔드에 인증 정보를 허용하는 구성을 추가해야 한다는 것을 발견했습니다

axios.defaults.withCredentials=true;

해당 구성도 필요합니다. made in the backendallowCredentials(true);

@Bean
public WebMvcConfigurer corsConfigurer() {
 return new WebMvcConfigurerAdapter() {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
   registry.addMapping("/**")
     .allowedHeaders("*")
     .allowedMethods("*")
     .allowedOrigins("*").allowCredentials(true);
  }
 };
}

이 구성을 추가한 후 작업 프로세스를 다시 실행해 보니 로그인 후 시스템으로 정상적으로 점프할 수 있고 페이지 데이터도 정상적으로 표시되는 것을 확인했습니다.

끝났다고 생각한 순간 갑자기 페이지를 클릭했는데 데이터가 정상적으로 표시되지 않네요. 너무 혼란스러워서 빨리 F12를 눌러 본 적 없는 요청 방법, OPTIONS 요청이 나왔습니다. 이 요청 방법이 POST인 이유는 무엇입니까? 그래서 몇 가지 다른 POST 요청을 주문했는데 모두 OPTIONS 요청으로 바뀌는 것을 발견했습니다. 나는 혼란스러워서 OPTIONS 요청의 정보를 재빨리 확인했습니다. 인터넷에서는 OPTIONS 요청을 "사전 확인 요청"이라고 합니다. 이는 공식 Before를 의미합니다. 요청이 실행되면 브라우저는 먼저 사전 확인 요청을 시작합니다. 사전 확인 요청이 통과된 후에만 정식 요청이 실행될 수 있습니다. 읽은 후 갑자기 OPTIONS가 가로채어 더 이상 POST 요청을 실행할 수 없다는 것을 깨달았습니다. 그런 다음 사전 확인 요청을 통과시켰습니다. 이 판단을 인터셉터

//option预检查，直接通过请求
if ("OPTIONS".equals(request.getMethod())){
 return true;
}

에 추가하면 됩니다. 이렇게 하면 인터셉터가 요청이 사전 확인 요청임을 확인하면 바로 전달하고 다음 POST 요청을 실행할 수 있습니다.

위 내용은 vue+springboot의 프런트엔드와 백엔드를 분리하여 도메인 간 싱글 사인온을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!