Vue应用中捕捉到特定的HTTP状态码

贺公子之数据科学与艺术

发布于 2025-08-29 17:31:55

15900

代码可运行

运行总次数：0

代码可运行

在Vue应用中捕捉到特定的HTTP状态码（例如403 Forbidden）并进行相应处理，可以通过使用全局的HTTP请求拦截器来实现。这样可以确保每次请求失败时都能统一处理错误，并根据不同的状态码执行相应的逻辑。

下面是一个详细的实现步骤：

1. 安装和配置Axios

首先，确保你已经安装了Axios，并且在你的Vue应用中进行了配置。

npm install axios

然后，在你的Vue应用中配置Axios：

// src/http.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://your-api-url',
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些事情，例如添加token
    const token = localStorage.getItem('accessToken') || '';
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    if (error.response) {
      // 根据 HTTP 状态码进行不同的错误处理
      switch (error.response.status) {
        case 403:
          // 403 Forbidden
          handle403Error(error);
          break;
        // 其他状态码处理
        default:
          console.error('Unexpected error:', error);
      }
    } else if (error.request) {
      // The request was made but no response was received
      console.error('No response received:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Error setting up request:', error.message);
    }
    return Promise.reject(error);
  }
);

export default instance;

function handle403Error(error) {
  // 清除本地存储的 token
  localStorage.removeItem('accessToken');
  // 重定向到登录页面
  window.location.href = '/login';
}

2. 在Vue应用中使用配置好的Axios实例

确保在你的Vue应用中导入并使用配置好的Axios实例：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import http from './http'; // 导入配置好的Axios实例

Vue.prototype.$http = http; // 将Axios实例挂载到 Vue 原型上

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在Vue组件中使用Axios

在你的Vue组件中，你可以直接使用this.$http来发起请求，并且所有的请求都会经过上面配置的拦截器：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data')
        .then(response => {
          console.log('Data fetched:', response.data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
  },
};
</script>

解释

配置Axios：在http.js中配置Axios实例，并添加请求和响应拦截器。
- 请求拦截器：在请求发送前，检查并添加Authorization头。
- 响应拦截器：在响应到达后，根据HTTP状态码进行处理。特别是针对403状态码，调用handle403Error函数来处理。
处理403错误：定义一个handle403Error函数，用于清除本地存储的accessToken并重定向到登录页面。
在Vue应用中使用Axios：将配置好的Axios实例挂载到Vue原型上，这样在任何组件中都可以直接使用this.$http。