vue3 axios拦截器如何进行路由跳转

原创

mob649e8166858d 2024-09-02 04:17:08 ©著作权

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

Vue 3 Axios 拦截器与路由跳转的实用示例

在现代前端开发中，Vue 3 作为一个流行的框架，与 Axios 一起使用，以处理 HTTP 请求变得尤为重要。本文将探讨如何使用 Axios 拦截器实现统一的错误处理，并通过路由跳转引导用户进行相应的操作。

问题背景

在实际开发中，常常需要对所有的 API 请求进行统一的错误处理。例如，当 HTTP 请求返回 401（未授权）状态码时，我们可能需要引导用户重定向到登录页面。通过 Axios 拦截器，我们可以在全局范围内捕获发送与响应的请求，从而决定是否需要路由跳转。

实现步骤

安装 Axios：如果尚未安装，可以使用 npm 进行安装。
```
npm install axios
```

配置 Axios 拦截器：在 Vue 3 项目中，我们可以创建一个专门的 Axios 配置文件，集中处理拦截器的逻辑。

// src/plugins/axios.js
import axios from 'axios';
import router from '../router';

const instance = axios.create({
    baseURL: ' // 替换为目标 API
    timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
    (config) => {
        // 在请求发送之前做些什么
        return config;
    },
    (error) => {
        // 请求错误时做些什么
        return Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    (response) => {
        // 对响应数据做点什么
        return response;
    },
    (error) => {
        const status = error.response ? error.response.status : 500;
        if (status === 401) {
            // 401未授权时，跳转到登录页面
            router.push('/login');
        }
        return Promise.reject(error);
    }
);

export default instance;

使用 Axios 实例：现在，我们可以在 Vue 组件中使用这个配置好的 Axios 实例了。

// src/views/Home.vue
<script>
import api from '../plugins/axios';

export default {
    name: 'Home',
    mounted() {
        api.get('/user/profile')
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error("Error fetching data", error);
            });
    }
};
</script>

关系图

以下是示意性关系图，描述了 Vue 3、Axios 和路由之间的关系。

erDiagram
    Vue3 ||--o| Axios : uses
    Axios }|..|{ Router : interacts
    Router }|--o| Login : redirects_to

序列图

我们可以用序列图展示请求过程以及如何在发生错误时进行路由跳转。

sequenceDiagram
    participant User
    participant Vue3
    participant Axios
    participant Router

    User->>Vue3: Trigger Action
    Vue3->>Axios: Send Request
    Axios->>Axios: Intercept Request
    Axios-->>Vue3: API Response (401 Error)
    Vue3->>Router: Redirect to Login