当前位置：首页 > 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 中全局挂载：

vue实现http拦截

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

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

标签: vue http

分享给朋友：

vue实现https

Vue 中实现 HTTPS 的步骤在 Vue 项目中实现 HTTPS 主要涉及开发环境配置和生产环境部署。以下是具体方法：开发环境配置（Vue CLI 或 Vite）使用 mkcert 生成…

vue实现看板

Vue 实现看板功能使用 Vue 实现看板功能可以通过组件化开发、状态管理和拖拽库结合完成。以下是一个完整的实现方案：基础项目结构 src/ ├── components/ │ ├── Ka…

利用vue 实现

以下是利用 Vue 实现常见功能的几种方法，分为不同场景和技术要点：数据绑定与响应式更新 Vue 的核心特性是数据绑定，通过 v-model 实现双向绑定： <template>…

vue实现链接

Vue 实现链接的方法在 Vue 中实现链接可以通过多种方式，包括使用 <router-link>、<a> 标签或编程式导航。以下是几种常见的方法：使用 <rout…

vue 实现赋值

Vue 实现赋值的方法在 Vue 中，赋值操作通常涉及数据绑定和响应式更新。以下是几种常见的赋值方式：直接赋值给 data 属性在 Vue 实例的 data 对象中定义的属性可以直接通过 th…

vue实现拦截登录

Vue 实现登录拦截的方法使用路由守卫进行拦截 Vue Router 提供了全局前置守卫 beforeEach，可以在路由跳转前进行验证。在路由配置文件中添加以下代码： import router…

vue实现http拦截