vue前端如何拦截

在Vue前端，拦截操作主要通过1、导航守卫和2、全局请求拦截器来实现。在Vue Router中，导航守卫可以拦截路由跳转，而在Axios中，全局请求拦截器可以拦截HTTP请求。以下内容将详细介绍这些方法。

一、导航守卫

导航守卫是Vue Router提供的功能，用于在路由跳转前或后执行某些操作。主要有三类导航守卫：

全局守卫
路由守卫
组件内守卫

1、全局守卫

全局守卫是在全局范围内对所有路由进行拦截。包括beforeEach、beforeResolve和afterEach三种。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 执行一些操作
  console.log('全局前置守卫')
  next()
})
// 全局解析守卫
router.beforeResolve((to, from, next) => {
  // 执行一些操作
  console.log('全局解析守卫')
  next()
})
// 全局后置钩子
router.afterEach((to, from) => {
  // 执行一些操作
  console.log('全局后置钩子')
})
export default router

2、路由守卫

路由守卫是在特定路由上设置的守卫。包括beforeEnter和beforeLeave。

const router = new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 执行一些操作
        console.log('路由守卫')
        next()
      }
    }
  ]
})

3、组件内守卫

组件内守卫是在组件内部定义的守卫。包括beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

export default {
  name: 'About',
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('组件内守卫：beforeRouteEnter')
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/foo/:id`，在 `/foo/1` 和 `/foo/2` 之间跳转的时候，
    // 由于会渲染同样的 `Foo` 组件，因此组件实例会被复用。而这个钩子会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('组件内守卫：beforeRouteUpdate')
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('组件内守卫：beforeRouteLeave')
    next()
  }
}

二、全局请求拦截器

在Vue项目中，全局请求拦截器通常通过Axios来实现。Axios提供了请求和响应拦截器，可以在请求发送前或响应接收后对其进行处理。

1、请求拦截器

请求拦截器可以在请求发送前对请求进行一些操作，比如添加认证信息、修改请求头等。

import axios from 'axios'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求拦截器')
  config.headers.Authorization = 'Bearer ' + token
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

2、响应拦截器

响应拦截器可以在响应接收后对响应进行一些操作，比如统一处理错误信息、数据格式化等。

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('响应拦截器')
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

三、结合使用

导航守卫和请求拦截器可以结合使用，以实现更复杂的业务需求。例如，可以在导航守卫中检查用户是否已登录，如果未登录则跳转到登录页面。在请求拦截器中，可以为所有请求添加统一的认证信息。

import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/protected',
      name: 'protected',
      component: () => import('./views/Protected.vue'),
      meta: { requiresAuth: true }
    }
  ]
})
// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要认证的路由
    if (!isLoggedIn()) {
      next({ name: 'login' })
    } else {
      next()
    }
  } else {
    next()
  }
})
// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求拦截器')
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
export default router
function isLoggedIn() {
  // 这里可以添加实际的登录状态检查逻辑
  return !!localStorage.getItem('token')
}

四、实例说明

为了更好地理解导航守卫和请求拦截器的使用，以下是一个具体的实例说明。

1、导航守卫实例

假设我们有一个电商网站，只有登录用户才能访问订单页面。可以通过导航守卫实现这个需求。

const router = new Router({
  routes: [
    {
      path: '/orders',
      name: 'orders',
      component: Orders,
      meta: { requiresAuth: true }
    }
  ]
})
// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要认证的路由
    if (!isLoggedIn()) {
      next({ name: 'login' })
    } else {
      next()
    }
  } else {
    next()
  }
})
function isLoggedIn() {
  // 这里可以添加实际的登录状态检查逻辑
  return !!localStorage.getItem('token')
}

2、请求拦截器实例

假设我们需要在所有请求中都添加一个API密钥，可以通过请求拦截器实现这个需求。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求拦截器')
  config.headers['API-Key'] = 'your-api-key'
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

总结

通过以上内容，我们了解了在Vue前端如何拦截操作，主要通过导航守卫和全局请求拦截器来实现。导航守卫可以在路由跳转前或后执行特定操作，而全局请求拦截器则可以在HTTP请求发送前或响应接收后进行处理。结合使用导航守卫和请求拦截器，可以实现更复杂的业务需求，如用户认证、错误处理等。建议在实际项目中，根据具体需求选择合适的拦截方式，并结合实际场景进行灵活应用。

相关问答FAQs：

问题1：Vue前端如何拦截请求？

Vue前端可以通过拦截请求来进行一些自定义操作，例如对请求进行验证、修改请求参数等。以下是一种常见的拦截请求的方法：

在Vue项目中使用axios库来发送请求，在main.js文件中引入axios：

import axios from 'axios'

创建一个axios实例，并进行拦截器配置：

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

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前可以对请求进行一些操作，比如添加token、修改请求参数等
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应进行一些操作，比如处理错误码、统一处理成功响应等
  return response.data
}, error => {
  return Promise.reject(error)
})

Vue.prototype.$http = instance // 将axios实例挂载到Vue原型上，方便在组件中使用

在组件中使用拦截请求：

methods: {
  fetchData() {
    this.$http.get('/api/data').then(response => {
      // 处理响应数据
    }).catch(error => {
      // 处理错误
    })
  }
}

通过以上步骤，我们可以在请求发送前对请求进行拦截和修改，并在响应返回后对响应进行拦截和处理。

问题2：如何在Vue前端拦截路由导航？

在Vue前端项目中，我们可以使用路由守卫来拦截路由导航，以实现一些权限控制、页面跳转等操作。

在路由配置文件中定义路由守卫：

import router from '@/router'
import store from '@/store'

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.meta.requireAuth && !store.state.isLogin) {
    // 如果用户未登录并且该路由需要登录权限，则跳转到登录页面
    next('/login')
  } else {
    // 如果用户已登录或者该路由不需要登录权限，则继续导航
    next()
  }
})

在路由配置中指定哪些路由需要登录权限：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      requireAuth: true // 需要登录权限
    }
  },
  {
    path: '/login',
    component: Login
  }
]

通过以上步骤，我们可以在路由导航之前进行拦截，并根据需求进行相关操作，例如跳转到登录页面、跳转到指定页面等。

问题3：Vue前端如何拦截表单提交？

在Vue前端项目中，我们可以通过拦截表单提交来进行一些自定义操作，例如表单验证、修改表单数据等。

在表单组件中监听提交事件并进行拦截：

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 表单内容 -->
  </form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      // 进行表单验证等操作
      // 如果需要提交表单，则调用相应的提交方法
    }
  }
}
</script>

在handleSubmit方法中可以进行表单验证、修改表单数据等操作：

handleSubmit() {
  // 表单验证
  if (!this.form.name) {
    alert('请输入姓名')
    return
  }
  
  // 修改表单数据
  this.form.name = this.form.name.trim()
  
  // 提交表单
  this.$http.post('/api/submit', this.form).then(response => {
    // 处理成功响应
  }).catch(error => {
    // 处理错误
  })
}

通过以上步骤，我们可以在表单提交之前进行拦截和处理，并根据需求进行表单验证、修改表单数据等操作。

文章标题：vue前端如何拦截，发布者：不及物动词，转载请注明出处：https://worktile.com/kb/p/3606993