单点登录基于 Apereo CAS实现,不是此次记录的重点。

登陆过程中,需要重定向至CAS Server,前端Vue+axios,需要从单页面跳转至login页面,后端如果使用response.sendRedirect(),返回302,axios并不能拦截到302,浏览器会自动跳转,就会出问题。

解决:

后端判断请求是否是axios(Ajax)请求,如果是,不返回302,约定一个返回码,我用的是401,前端axios在response中拦截到401错误,由前端利用window.location=xxx进行跳转。

踩坑:

如何判断Ajax请求,网上搜索得知,判断reques.getHeader("X-Requested-With"),如果是XMLHttpRequest,那么就是Ajax请求。但是不知道是什么问题,请求中并没有“X-Requested-With”这个请求头,遂在axios的config中设置了headers如下:

  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }

就又踩一坑,由于自定义了请求头,请求变成了复杂请求,浏览器会先发一个预检请求(OPTIONS方法),通过预检之后才会发真正的请求(GET,POST等),因此后端要处理预检请求:

if (request.getMethod().equals("OPTIONS")) {
//处理预检请求
response.setStatus(HttpStatus.SC_NO_CONTENT);
response.addHeader("Access-Control-Max-Age", "86400");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers","x-requested-with");
response.setHeader("Access-Control-Allow-Origin", “xxx”);
response.setHeader("Access-Control-Allow-Credentials", "true");
} else {
//处理真正的请求
}

在处理真正的请求时,就要按照解决办法来操作。

 

Logo

前往低代码交流专区

更多推荐