vue前后端分离如何实现单点登录跨域

这篇文章主要介绍“Vue前后端分离如何实现单点登录跨域”，在日常操作中，相信很多人在vue前后端分离如何实现单点登录跨域问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue前后端分离如何实现单点登录跨域”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

代码如下：

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

这个配置就是允许所有mapping，所有请求头，所有请求方法，所有源。改好配置之后我果断重启项目，看效果，结果发现根本没法重定向跳转到单点登录页面，看浏览器报错是跨域导致的，我先上我登录拦截器的代码

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"

之后前端访问系统，可以直接跳转到单点登录页面。但是当我输完账号和密码点击登录后回跳到系统，发现所有的请求数据接口都无法正常访问，debug发现所有的请求都没带用户信息，被拦截器识别为未登录，所有请求无法通过。

为什么我明明登录了呀，拦截器也设置了用户信息到session啊，怎么cookies那就没了呢？再次发起请求，发现每次请求的JsessionId都不一样，查了很多资料，发现是需要在前端加一个允许带认证信息的配置

axiOS.defaults.withCredentials=true;

后台也需要做一个相应的配置allowCredentials(true);

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

加完这个配置之后，重新执行一遍操作流程，发现登录之后能正常跳转到系统，页面数据也展示正常。

正当我以为大功告成的时候，突然点到一个页面又无法正常显示数据，好纳闷啊，赶紧F12，发现一个之前没见过的请求方式，OPTIONS请求，原来这个请求方式明明是POST呀，怎么就变成了OPTIONS了呢？于是我有点了其他几个POST的请求，发现都变成了OPTIONS请求，一脸懵逼的我赶紧查了一下OPTIONS请求的资料，网上说OPTIONS请求叫做“预检查请求”，就是在你的正式请求执行之前，浏览器会先发起预检查请求，预检查请求通过了，才能执行正式请求。看完恍然大悟，原来OPTIONS被拦截了，所以没法再执行我的POST的请求啊，那我直接让预检查请求通过就好了。只要在拦截器中加一个这个判断就好了

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

这样拦截器发现请求是预检查请求就直接通过，就可以执行接下来的POST的请求了。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的html、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

到此，关于“vue前后端分离如何实现单点登录跨域”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！