Vue.js 在vue中处理axios请求返回的身份验证页

我有一个vue应用程序，它位于防火墙后面，控制身份验证。当您首次访问应用程序时，您需要进行身份验证，然后才能访问该应用程序，并且在身份验证过期之前一切正常。从我的应用程序的角度来看，我只知道，当我使用axios发送API请求时，用户需要重新验证，我收到的不是预期的有效负载，而是403错误，我发现如下所示：

从“axios”导入axios
var api_url=“…”
导出默认的新类APICall{
构造函数（）{
this.axios=axios.create({
标题：{
“接受”：“应用程序/json”，
“缓存控制”：“无缓存”，
“内容类型”：“应用程序/json”，
},
事实上，
baseURL:api_url
});
}
//向API发送带有附加数据的get请求
获取（命令）{
返回此.axios.get（命令）
。然后（（响应）=>{
if（response&&response.status==200）{
return response.data；//一切正常
}否则{
返回响应；//不应该发生
}
}).catch（（错误）=>{
如果（错误消息
&&错误消息==“请求失败，状态代码403”
&&err.response&&err.response.data）{
//err.response.data现在包含身份验证页面的HTML
//此页上的成功身份验证将重新发送
//原始axios请求，位于err.response.config中
}
})
}
}

在catch语句中，

err.response.data

是身份验证页面的HTML，在此页面上成功身份验证会自动重新触发原始请求，但我一辈子都看不到如何使用它将我想要的负载返回到我的应用程序

尽管从安全角度来看这并不理想，但我可以使用

v-html

标记显示

err.response.data

的内容。当我这样做时，我无法确定如何捕获验证页面触发原始请求时返回的负载，因此负载最终会显示在浏览器中。有人知道怎么做吗？我尝试过将所有内容都包装在承诺中，但我认为问题在于我没有对重新启动的请求做出承诺，因为我无法直接控制它

我是否需要在

err.response.data

中对表单进行黑客攻击以控制数据的返回方式？我觉得我应该使用拦截器，但不完全确定它们是如何工作的

编辑

我已经意识到，最干净的方法是在新窗口中打开

error.response.data

中的表单，以便用户可以使用以下方式重新验证：

var login\u window=window.open（'about:blank'，'u blank'）；
登录\窗口.文档.写入（错误.响应.数据）

成功重新验证后，

login\u窗口现在包含原始axios
get
请求的json。因此，我现在的问题是如何检测何时启动身份验证以及
login\u窗口
包含我想要的json。如中所述，从格式化窗口提取json也有问题，因为当我查看
login\u window.document.body.innerText时，“手动”会看到表单的文本字符串

JSON
Raw Data
Headers
Save
Copy
Collapse All
Expand All

status  \"OK\"
message \"\"
user    \"andrew\"

但是如果有一种可靠的方法可以确定用户何时在页面
登录窗口
上提交登录表单，然后我可以重新发送请求，我会很高兴。
一种解决方案是覆盖
的提交事件处理程序，然后使用Axios提交表单，这样您就可以访问表单的响应数据

步骤：

查询表单容器中的
元素：

//
const form=this.$refs.container.querySelector（'form'））

添加一个
submit
-事件处理程序，该处理程序调用以停止提交：

form.addEventListener（'submit'，e=>{
e、 预防默认值（）
})

使用Axios发送原始请求，添加您自己的响应处理程序以获取结果数据：

form.addEventListener（'submit'，e=>{
e、 预防默认值（）
axios({
方法：form.method，
url:form.action，
数据：新表单数据（表单）
})
。然后（响应=>{
const{data}=响应
//数据现在包含身份验证前原始请求的响应
})
})

我会采取不同的方法，这取决于您对API的控制：


选项1：您可以控制（或包装）API
让API返回401（未授权-意味着需要验证）而不是403（禁止-意味着没有适当的访问权限）
创建一个身份验证REST API（例如POST），该API返回一个新的身份验证令牌
使用Axios拦截器：


this.axios.interceptors.response.use（函数onResponse（response））{
//在2xx范围内的任何状态代码都会触发此功能
//这里什么都不用做
返回响应；
}，异步函数onResponseError（错误）{
//任何超出2xx范围的状态代码都会触发此功能
如果（“响应”错误&“配置”错误）{//这是一个axios错误
如果（error.response.status！==401）{//无法处理
返回误差；
}
this.token=等待this.axios.post（“auth”，凭证）；
error.config.headers.authorization=`Bearer${this.token}`；
返回此.axios.request（配置）；
}
返回错误；//不是axios错误，无法处理
});

结果是t