Vue 拦截器原理和详细使用

这篇具有很好参考价值的文章主要介绍了Vue 拦截器原理和详细使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

拦截器原理和作用

  • 首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器。

  • 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作。

  • 这一文件一般引入axios,vuex,Message,router 和相关方法 ,基地址+拦截器。

  • 请求拦截器:Token的主动处理 给每一个请求添加请求头token 对请求异常抛出。

  • 响应拦截器:简化axios默认加了一层的data Token被动处理 对请求异常抛出。


最简化版本

// 导入axios
import axios from 'axios'

// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超时
  timeout: 10000
})

// 请求拦截
request.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截
request.interceptors.response.use(
  res => {
    return res
  },
  // 响应错误的代码写这里
  error => {
    return Promise.reject(error)
  }
)

// 暴露副本
export default service

下面是实际开发中使用

注意:

当我们使用axios时候,他会给我们默认加一层data。这样我们取数据的时候就会比较增加无效代码,所以我们可以在数据响应的时候判断,给他人为的去掉一层,如下面判断 return data ,这样就可以直接res.data.变量

还有一个是token 处理 这里包含了主动处理:登录时候存一个时间,判断这个时间,超过就调用登出方法,提示信息,打回到登录页。被动处理:异常的时候判断一下,如果是和后端规定好的token过期状态码(比如401),就调用登出方法,提示信息,打回到登录页。

基地址最好不要写死写变量名,这样我们就可以通过改环境文件快速更改地址。

// 导入axios
import axios from 'axios'
// 导入提示信息
import { Message } from 'element-ui'
// 导入vuex
import store from '@/store'
// 导入路由
import router from '@/router'
// 导入获取时间和token的工具函数
import { getToken, getTokenTime } from '@/utils/auth'

// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超时
  timeout: 10000
})
// 请求拦截
// 添加一个service的请求拦截器
service.interceptors.request.use(
  async config => {
    // config就是本次发请求的信息
    // 判断有没有token
    if (store.state.user.token) {
      // token失效的主动处理
      // 获取一下记录token的时间
      let start = getTokenTime()
      // 获取一下当前时间
      let now = Date.now()

      // 算出时间差
      let hour = (now - start) / 1000 / 3600

      // 判断是否超过1小时
       if (hour >= 1) {
         // 代表token过期
         await store.dispatch('user/logout')
         Message.error('token已过期,请重新登录')
         router.push('/login')
      // return代表不往下执行,所以这个请求不会发送
         return
       }
       config.headers.Authorization = 'Bearer ' + getToken()
      config.headers['Bearer'] = getToken()
      // config.headers.tenantid =  getTenantId ()
    }
    // 发送请求
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截
service.interceptors.response.use(
  res => {
    // axios默认加了一层data
    // 这个res包括这个请求响应回来的所有信息
    // 所有的接口请求都会回到这里
    // 获取到本次请求得到的数据
    const data = res.data
    // 会帮所有的请求打印
    // console.log(data);
    // 判断本次请求是否成功
    if (data.code === 200 || data.code == 0) {
      // 如果响应成功,则正常给他返回数据
      return data
    } else {
      // 证明失败,我们需要让外面的catch被调用
      // 要让catch被调用,就要手动抛出一个错误,并把服务器返回的消息抛回去
      Message.warning(data.message || data.msg)
      return Promise.reject(data.message)
    }
  },
  async error => {
    // token失效的被动处理
    console.log(error)
    if (error.response.data.code === 401) {
      await store.dispatch('user/logout')
      Message.warning('登录状态过期,请重新登录!')
      router.push('/login')
    } else {
      return Promise.reject(error)
    }
  }
  // error => {
  //   return Promise.reject(error)
  // }
)
// 暴露副本
export default service

浏览器存取

service.interceptors.request.use,Vue-相关技术,vue.js,javascript,前端


总结:

经过这一趟流程下来相信你也对 Vue 拦截器原理和详细使用 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-569707.html

到了这里,关于Vue 拦截器原理和详细使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【SpringBoot篇】Interceptor拦截器 | 拦截器和过滤器的区别

    拦截器(Interceptor)是一种软件设计模式,用于在应用程序处理请求或响应时对其进行拦截和修改。拦截器可以在整个应用程序中使用,用于执行跨越多个层的通用任务,如身份验证、授权、缓存、日志记录、性能计量等。 在Web开发中,拦截器通常用于在请求到达控制器之前

    2024年02月04日
    浏览(63)
  • SpringMVC拦截器 (Interceptor)

            Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理。例如通过拦截器可以进行权限验证、判断用户是否登录等。         拦截器依赖于web框架,在实现上基于Java的反射机制,属于面向切面编程(AOP)的

    2024年01月22日
    浏览(49)
  • SpringMVC的拦截器(Interceptor)

    对于拦截器这节的知识,我们需要学习如下内容: 拦截器概念 入门案例 拦截器参数 拦截器工作流程分析 讲解拦截器的概念之前,我们先看一张图: (1)浏览器发送一个请求会先到Tomcat的web服务器 (2)Tomcat服务器接收到请求以后,会去判断请求的是静态资源还是动态资源 (3)如果是

    2024年02月09日
    浏览(43)
  • SpringBoot(八)拦截器Interceptor

        上篇介绍了Filter过滤器的使用,提起过滤器,就不得不再提起另外一个叫做拦截器的东西。两者的作用类似,都可以实现拦截请求的作用,但其实两者有着非常大的区别。本篇,我们就来学习下拦截器的使用。     如果你是新手,且没看过我之前的一系列SpringBoot文章,

    2024年02月17日
    浏览(44)
  • C# 12 拦截器 Interceptors

    拦截器Interceptors是一种可以在编译时以声明方式替换原有应用的方法。 这种替换是通过让Interceptors声明它拦截的调用的源位置来实现的。 您可以使用拦截器作为源生成器的一部分进行修改,而不是向现有源编译添加代码。   演示 使用 .NET 8 创建一个控制台应用程序。并在

    2024年03月20日
    浏览(43)
  • Spring Boot拦截器(Interceptor)详解

    **拦截器(Interceptor)**同 Filter 过滤器一样,它俩都是面向切面编程——AOP 的具体实现(AOP切面编程只是一种编程思想而已)。 你可以使用 Interceptor 来执行某些任务,例如在 Controller 处理请求之前编写日志,添加或更新配置…… 在 Spring 中,当请求发送到 Controller 时,在被 Contr

    2024年02月03日
    浏览(41)
  • 过滤器Filter,拦截器Interceptor

    过滤器Filter 快速入门   详情 登录校验-Filter 拦截器Interceptor 简介快速入门 定义拦截器 配置拦截器 详解(拦截路径,执行流程) 登录校验-Interceptor

    2024年02月07日
    浏览(44)
  • quarkus依赖注入之五:拦截器(Interceptor)

    这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本文是《quarkus依赖注入》系列的第五篇,经过前面的学习,咱们熟悉了依赖注入的基本特性,接下来进一步了解相关的高级特性,先从本篇的拦截器开始 如果您熟悉spring的话,对拦截器应该不会陌

    2024年02月14日
    浏览(52)
  • 过滤器(Filter)和拦截器(Interceptor)有什么不同?

    过滤器(Filter)和拦截器(Interceptor)是用于处理请求和响应的中间件组件,但它们在实现方式和应用场景上有一些不同。 过滤器 是Servlet规范中定义的一种组件,通常以Java类的形式实现。过滤器通过在 web.xml 配置文件中声明来注册,并在Web应用程序的请求和响应链中拦截请

    2024年02月07日
    浏览(38)
  • 7.5 SpringBoot 拦截器Interceptor实战 统一角色权限校验

    在【 7.1 】管理员图书录入和修改API,当时预告过:并没有写【校验是否是管理员】的逻辑,因为是通用逻辑,会单写一篇来细讲,那么今天就来安排! 角色权限校验 ,是保证接口安全必备的能力:有权限才可以操作!所以,一般对于这种通用逻辑,推荐不与主业务逻辑耦合

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包