当前位置：首页 > 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 文件，配置基础实例：

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)
  }
)

响应拦截器

处理响应数据和错误：

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 http

分享给朋友：

vue实现anchor

Vue 实现 Anchor（锚点）功能在 Vue 中实现锚点功能可以通过多种方式完成，以下是几种常见的方法：使用 HTML 原生锚点 HTML 原生锚点是最简单的方式，通过 <a>…

vue实现滚动中断

Vue 实现滚动中断的方法在 Vue 中实现滚动中断通常涉及监听滚动事件，并在特定条件下阻止默认行为或停止滚动。以下是几种常见方法：监听滚动事件并阻止默认行为通过 @scroll 或 @whe…

vue实现头像剪切

Vue 实现头像剪切的实现方法使用 vue-cropperjs 库 vue-cropperjs 是一个基于 cropperjs 的 Vue 组件，专门用于图片裁剪。安装方式如下： npm inst…

vue实现sql操作

在Vue中实现SQL操作通常需要结合后端服务或本地数据库技术，因为前端JavaScript无法直接连接SQL数据库。以下是几种常见的实现方式：通过API与后端交互 Vue前端通过HTTP请求（如…

vue实现添加用户

Vue 实现添加用户功能数据绑定与表单设计在 Vue 中实现添加用户功能，首先需要设计一个表单，用于收集用户输入的数据。通过 v-model 实现双向数据绑定，确保表单数据与 Vue 实例中的数据…

vue实现多人视频

实现多人视频通话的Vue方案使用WebRTC技术结合Vue框架可以构建多人视频通话应用。以下是核心实现方法：技术栈选择 Vue 2/3作为前端框架 WebRTC用于实时通信 Socket.io…

vue实现http拦截