Bagaimana untuk menyelesaikan masalah rentas domain log masuk tunggal dengan memisahkan bahagian hadapan dan hujung belakang vue+springboot

Kod adalah seperti berikut:

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

Konfigurasi ini membenarkan semua pemetaan, semua pengepala permintaan, semua kaedah permintaan dan semua sumber. Selepas menukar konfigurasi, saya memulakan semula projek dengan tegas untuk melihat kesannya. Saya mendapati bahawa tiada cara untuk mengubah hala ke halaman log masuk tunggal Memandangkan ralat penyemak imbas disebabkan oleh merentas domain, saya mula-mula memuat naik kod pemintas log masuk saya

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

Kemudian, gunakan vue bahagian hadapan untuk meminta antara muka log masuk bahagian belakang secara terus menggunakan

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

Kemudian bahagian hadapan mengakses sistem dan boleh melompat terus ke halaman log masuk tunggal. Tetapi apabila saya memasukkan akaun dan kata laluan dan mengklik untuk log masuk, saya melompat kembali ke sistem dan mendapati bahawa semua antara muka data permintaan tidak dapat diakses secara normal mendapati bahawa semua permintaan tidak membawa maklumat pengguna dan diiktiraf oleh pemintas sebagai tidak dilog masuk, jadi semua permintaan tidak dapat diluluskan.

Mengapa saya log masuk dengan jelas dan pemintas juga menetapkan maklumat pengguna kepada sesi Mengapa kuki hilang? Saya memulakan permintaan sekali lagi dan mendapati bahawa JsessionId bagi setiap permintaan adalah berbeza. Saya telah menyemak banyak maklumat dan mendapati bahawa saya perlu menambah konfigurasi yang membolehkan maklumat pengesahan ditambahkan pada bahagian hadapan

axios.defaults.withCredentials=true;

A. konfigurasi yang sepadan juga perlu dibuat di bahagian belakang allowCredentials(true );

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

Selepas menambah konfigurasi ini, saya menjalankan proses operasi sekali lagi dan mendapati bahawa saya boleh melompat ke sistem seperti biasa selepas log masuk, dan halaman data juga dipaparkan secara normal.

Apabila saya fikir saya telah selesai, saya tiba-tiba mengklik pada halaman dan data tidak dapat dipaparkan seperti biasa, saya sangat keliru, saya dengan cepat F12 dan menemui kaedah permintaan yang tidak pernah saya lihat sebelum ini, iaitu OPTIONS permintaan. Ternyata kaedah permintaan ini jelas POST, mengapa ia menjadi PILIHAN? Oleh itu, saya memesan beberapa permintaan POST lain dan mendapati bahawa semuanya bertukar menjadi permintaan OPTIONS Saya keliru dan dengan cepat menyemak maklumat permintaan OPTIONS permintaan itu dilaksanakan, penyemak imbas akan memulakan permintaan pra-semakan dahulu Hanya selepas permintaan pra-semak lulus, permintaan rasmi boleh dilaksanakan. Selepas membacanya, saya tiba-tiba menyedari bahawa OPTIONS telah dipintas, jadi saya tidak lagi dapat melaksanakan permintaan POST saya Kemudian saya hanya membiarkan permintaan pra-semak berlalu. Hanya tambahkan penghakiman ini pada pemintas

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

Dengan cara ini, jika pemintas mendapati bahawa permintaan itu adalah permintaan pra-semak, ia akan lulus terus dan permintaan POST seterusnya boleh dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah rentas domain log masuk tunggal dengan memisahkan bahagian hadapan dan hujung belakang vue+springboot. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!