axios 重定向不跳转

原创

mob649e81567471 2024-03-09 05:43:14 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81567471的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现axios重定向不跳转

情景描述

在前端开发过程中，有时候我们会遇到需要处理重定向但又不希望页面跳转的情况，这时候我们可以通过axios来实现。接下来我将向你展示如何使用axios来实现重定向不跳转。

流程图

journey
    title 整件事情的流程
    section 用户发起请求
        用户->后端服务器: 发起请求
    section 服务器处理请求
        后端服务器->前端页面: 返回重定向请求
    section 前端处理请求
        前端页面->后端服务器: 发送带有重定向头的请求
        后端服务器-->前端页面: 返回重定向地址
        前端页面->后端服务器: 发送重定向地址的新请求

状态图

stateDiagram
    [*] --> 用户发起请求
    用户发起请求 --> 服务器处理请求
    服务器处理请求 --> 前端处理请求
    前端处理请求 --> [*]

步骤

下面是实现axios重定向不跳转的步骤：

发送带有重定向头的请求

// 设置axios实例
axiosInstance.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization = `Bearer ${token}`;
    return config;
}, function (error) {
    return Promise.reject(error);
});

这段代码是设置axios实例，添加了一个请求拦截器，用于在请求发送前加入token到请求头中。

返回重定向地址

// 处理重定向
axiosInstance.interceptors.response.use(function (response) {
    if (response.headers['content-type'] === 'text/html; charset=utf-8') {
        const redirectUrl = response.request.responseURL;
        window.location.href = redirectUrl;
    }
    return response;
}, function (error) {
    return Promise.reject(error);
});

这段代码是处理重定向的逻辑，当返回的响应头中包含'text/html; charset=utf-8'时，获取重定向地址并跳转页面。