vue+springboot前后端分离实现单点登录跨域问题解决方法


Posted in Javascript onJanuary 30, 2018

最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的。因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统。那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘。

刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)。。。,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑。

我面临的第一个问题是跨域,浏览器控制台直接报CORS,以我多年开发经验,我果断在后台配置了跨域配置,代码如下:

@Configuration
public 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);

@Bean
public 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+springboot前后端分离实现单点登录跨域问题解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 #Javascript
浅析vue深复制
Jan 29 #Javascript
浅析从vue源码看观察者模式
Jan 29 #Javascript
实例学习JavaScript读取和写入cookie
Jan 29 #Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 #Javascript
JS中Object对象的原型概念基础
Jan 29 #Javascript
vue.js实现只弹一次弹框
Jan 29 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python通过解析网页实现看报程序的方法
2014/08/04 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
聊聊python中的异常嵌套
2020/09/01 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
一道Delphi面试题
2016/10/28 面试题
消防先进事迹材料
2014/02/10 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
学校推普周活动总结
2015/05/07 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2015年国培研修感言
2015/08/01 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Python装饰器详细介绍
2022/03/25 Python