vue 拦截器使用

红太狼 2022-02-27 05:20 204阅读 0赞

**一，背景，**

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest  
从 node.js 发出 http 请求  
支持 Promise API  
拦截请求和响应  
转换请求和响应数据  
取消请求  
自动转换JSON数据  
客户端支持防止 CSRF/XSR

**二，场景**

每次都要在请求中加入，token ，判断是否登陆，如果vue系统中，所有的请求都加入token，比较麻烦，

有没有，每次发送求加入，vue 提供了一种方法，拦截器

**三，使用与配置**

在config 中，加入  axios.js

import axios from 'axios'
    
    // 配置默认的host,假如你的API host是：http://api.htmlx.club
      
    
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
    　　// 在发送请求之前做些什么
    if (window.localStorage.getItem('access-token')) {
        config.headers.Authorization = window.localStorage.getItem('access-token');
    }
    console.log(window.localStorage.getItem('access-token'));
    　　return config
    }, function (error) {
    　　// 对请求错误做些什么
    return Promise.reject(error)
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
    　　// 对响应数据做点什么
    　　return response
    }, function (error) {
    　　// 对响应错误做点什么
    　　return Promise.reject(error)
    });

四，在 main.js 加入配置

import axios from 'axios';
    import '../config/axios'
    Vue.prototype.$ajax = axios

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中使用axios拦截器拦截账号退出

用过程中，当登录账号异常退出的时候，页面请求接口数据会报401，这时候页面需要退出重新登录，我的实现方式是： import axios from 'axios'...

你的名字/ 2024年04月19日 15:43/ 0 赞/ 89 阅读

相关 VUE中的拦截器

import axios from 'axios' import { Notification, MessageBox, Message } from 'ele

妖狐艹你老母/ 2022年12月31日 02:25/ 0 赞/ 147 阅读

相关 vue+axios拦截器配置

vue+axios拦截器配置 import axios from "axios"; import QS from "qs"; // import

墨蓝/ 2022年11月19日 01:29/ 0 赞/ 250 阅读

相关 vue拦截器qs

一、概述什么是qs qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,

朱雀/ 2022年11月01日 13:49/ 0 赞/ 199 阅读

相关 struts2拦截器使用（部分拦截和全局拦截器）

应用场景:在请求处理之前拦截请求，做出相关处理。比如在一个网站中，用户尚未登录那么他是无法查看个人信息界面的。这时候我们就可以使用拦截器来拦截他访问个人信息的界面的请求。具体

淩亂°似流年/ 2022年05月17日 10:55/ 0 赞/ 394 阅读

相关 vue 拦截器使用

一，背景， axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：从浏览器中创建 XMLHttpRequest

红太狼/ 2022年02月27日 05:20/ 0 赞/ 205 阅读

相关 Vue中使用Axios拦截器（拦截请求与相应）

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Features 从浏览器中创建 [XMLHttpRequest

我就是我/ 2022年02月19日 10:36/ 0 赞/ 353 阅读

相关 vue axios拦截器介绍

axios的拦截器是一个作用非常大，非常好用的东西。分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。 1. 请求拦截器请求拦截器的作用是在请

末蓝、/ 2022年01月23日 11:51/ 0 赞/ 334 阅读

相关 vue-resource 拦截器（interceptor）的使用

拦截器-interceptor 在现代的一些前端框架上，拦截器基本上是很基础但很重要的一环，比如Angular原生就支持拦截器配置，VUE的Axio

谁借莪１个温暖的怀抱￠/ 2021年09月14日 06:04/ 0 赞/ 380 阅读

相关 vue中使用axios时封装公共方法（响应拦截器，请求拦截器）

npm install axios --save //安装依赖与main.js平行处创建http.js文件 import axios from

古城微笑少年丶/ 2021年09月01日 07:58/ 0 赞/ 549 阅读