vue+springboot가 도메인 간 싱글 사인온 문제를 구현하는 방법(자세한 튜토리얼)

본 글에서는 주로 vue+springboot의 프론트엔드와 백엔드를 분리하여 싱글 사인온의 크로스 도메인 문제에 대한 해결 방법을 소개하고 있습니다. 필요한 친구들은 참고하시면 됩니다

현재 백엔드 작업 중입니다. 최종 관리 시스템은 인기 있는 vue.js를 사용하고 있습니다. 배경은 springboot를 기반으로 합니다. 백엔드 시스템에는 로그인 기능이 없지만 회사에서 통합 로그인을 요구하기 때문에 로그인 인증은 .net 프로젝트 팀의 인증 시스템을 사용합니다. Single Sign-On이 무엇인지 모르는 학생들은 만능 Du Niang을 추천합니다.

처음 이 요구 사항을 받았을 때 나는 '로그인만 하는 것이 중요하지 않다'라고 경멸적으로 생각했습니다. 하지만 개발 과정이 저를 힘들게 했습니다. . . , 그래서 앞으로는 그런 함정에 빠지지 않도록 이번에는 이 교훈을 주의 깊게 기록해야 합니다.

제가 직면한 첫 번째 문제는 브라우저 콘솔이 CORS를 직접 보고하는 것이었습니다. 다년간의 개발 경험을 바탕으로 과감히 백그라운드에서 크로스 도메인 구성을 구성했습니다.

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

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

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;
}

나중에 프런트 엔드 vue는

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

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

나는 왜 분명히 로그인되어 있고 인터셉터도 세션에 사용자 정보를 설정합니까? 왜 쿠키가 사라 집니까? 다시 요청을 시작했는데 각 요청의 JsessionId가 다르다는 것을 확인했습니다. 많은 정보를 확인해보니 프런트 엔드에 인증 정보를 추가할 수 있는 구성을 추가해야 한다는 것을 알게 되었습니다

axios.defaults.withCredentials=true;

The 백엔드도 해당 구성을 만들어야 합니다.allowCredentials(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 요청을 실행할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

webpack이 127.0.0.1

Node.js의 Async 및 Await 기능 사용

Angular의 구성 요소에 템플릿 전달

위 내용은 vue+springboot가 도메인 간 싱글 사인온 문제를 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!