解决后端无法对前端的ajax请求重定向-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决后端无法对前端的ajax请求重定向。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本章目录：

问题描述
- AJAX请求后端直接重定向失败
解决方案
- 后端拦截请为响应头添加重定向标志
- 后端拦截器为响应头添加重定向路径
- 前端响应拦截器获取响应头数据，并通过location.href = url 完成页面跳转

一、问题描述

本来想在拦截器里设置未登录用户访问指定接口时，跳转到登录页面。

ajax 重定向页面跳转,异常,VUE,前端,http,vue.js,spring

结果发现前端请求到的res如下图所示，只返回了登录页的样式，并没有完成浏览跳转

ajax 重定向页面跳转,异常,VUE,前端,http,vue.js,spring

通过查阅资料了解：ajax是一种异步http请求方式，它可以在不刷新页面的情况下向后台发送请求并获取响应数据，但是它不能自动进行页面重定向。

二、解决方案

修改拦截器逻辑，未登录用户不直接重定向登录页面。

当未登录用户访问指定接口时，在响应头里添加“我要重定向”的标志并且添加重定向后的地址返回给前端，前端请求接口后，搜寻到"我要重定向"标志后，拿着对应的地址去完成页面跳转即可。

拦截器代码：

ajax 重定向页面跳转,异常,VUE,前端,http,vue.js,spring

前端请求后的获取的响应头：

ajax 重定向页面跳转,异常,VUE,前端,http,vue.js,spring

在axios的响应拦截器内判断响应头：

ajax 重定向页面跳转,异常,VUE,前端,http,vue.js,spring

axios.interceptors.response.use(function (response) {
    // 判断响应头内是否有重定向标志
  if(response.headers.redirect == null){
    return response.data
  } else {
    //响应头内的重定向地址
    location.href = response.headers.redirecturl
  }
  if (!response.data.success) {
    return Promise.reject(response.data.errorMsg)
  }
  return response.data;
}

如此，通过前端的location.href即可完成页面的重定向