当前位置：首页 > VUE

vue实现http拦截

2026-01-08 07:32:37VUE

Vue 实现 HTTP 拦截

在 Vue 项目中，通常通过 Axios 实现 HTTP 拦截功能，用于统一处理请求和响应。以下是具体实现方法：

安装 Axios

通过 npm 或 yarn 安装 Axios：

npm install axios
# 或
yarn add axios

创建 Axios 实例

在 src 目录下创建 utils/request.js 文件，配置基础实例：

vue实现http拦截

import axios from 'axios'

const service = axios.create({
  baseURL: 'https://api.example.com', // 基础地址
  timeout: 5000 // 请求超时时间
})

请求拦截器

在发送请求前统一添加 token 或修改配置：

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

响应拦截器

处理响应数据和错误：

vue实现http拦截

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      alert(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res
  },
  error => {
    if (error.response.status === 401) {
      alert('登录过期，请重新登录')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

导出实例

export default service

在组件中使用

在 Vue 组件中导入并使用：

import request from '@/utils/request'

export default {
  methods: {
    fetchData() {
      request.get('/user/info').then(response => {
        console.log(response)
      })
    }
  }
}

全局挂载（可选）

在 main.js 中全局挂载：

import request from './utils/request'
Vue.prototype.$http = request

通过以上步骤可以实现请求和响应的统一拦截处理，适用于 token 验证、错误处理等场景。拦截器逻辑可根据实际需求调整。

标签: vue http

分享给朋友：

vue实现选择本地文件

实现文件选择功能在Vue中实现本地文件选择可以通过HTML原生的<input type="file">元素实现。创建一个基本的文件选择组件： <template> &…

vue公共列表的实现

实现 Vue 公共列表组件公共列表组件通常用于展示重复结构的数据，例如商品列表、用户列表等。以下是一个典型的实现方式：基础实现创建可复用的列表组件 List.vue： <templ…

vue实现一个系统

Vue 系统实现步骤项目初始化与配置使用 Vue CLI 或 Vite 创建项目： npm init vue@latest my-system 选择需要的配置（Router、Pinia 等）。…

vue实现双折线图

实现双折线图的步骤安装必要的依赖库（如 ECharts 或 Chart.js），这里以 ECharts 为例： npm install echarts --save 在 Vue 组件中引入 ECh…

vue实现用户信息删除

Vue 实现用户信息删除功能在 Vue 中实现用户信息删除功能通常涉及前端界面交互和后端 API 调用。以下是实现步骤：前端界面设计创建删除按钮或操作项，通常使用 @click 事件触发删除…

vue实现钟表

使用 Vue 实现动态钟表以下是一个基于 Vue 3 的动态钟表实现方案，包含时分秒指针和数字时间显示。模板部分 <template> <div class="clock-…

vue实现http拦截