精华内容
下载资源
问答
  • 主要介绍了Vue axios拦截器如何单独配置token及vue axios拦截器的使用,需要的朋友可以参考下
  • vue中axios拦截器使用的图文详解

    千次阅读 2018-08-15 19:39:24
    这次给大家带来vue中axios拦截器使用的图文详解,vue中axios拦截器使用的注意事项有哪些,下面就是实战案例,一起来看一下。   vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点: 第一种...

     

    这次给大家带来vue中axios拦截器使用的图文详解,vue中axios拦截器使用的注意事项有哪些,下面就是实战案例,一起来看一下。

     

    vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点:

    第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了

    1

    2

    import axios from 'axios';

    Vue.prototype.axios=axios;

    components:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    this.axios({

        url:"a.xxx",

        method:'post',

        data:{

          id:3,

          name:'jack'

        }

      })

      .then(function(res){

        console.log(res);

      })

      .catch(function(err){

        console.log(err);

      })

     }

    这里需要注意一点,就是在axios中把请求到的数据 使用this复制给data是无效的,使用箭头函数可以解决。

    vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',是要跨域的才可以访问的,如果直接访问会报 XMLHTTPRequest can not load http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'. Response to preflight request doesn't pass access control….

    为什么存在跨域问题?因为这是非同源互相通讯,具体可以自己去google了解,这里只需要在webpack配置一下proxyTable就OK了,在config中找到index.js如下 :

    config/index.js

    1

    2

    3

    4

    5

    6

    7

    8

    9

    dev: {

      proxyTable: {

       '/api': {

        target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号

        changeOrigin: true,   //跨域

        pathRewrite: {

         '^/api': '/'     //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可

        }

       }

    跨域成功,但是这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置,分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

    config/dev.env.js:

    1

    2

    3

    4

    module.exports = merge(prodEnv, {

     NODE_ENV: '"development"',//开发环境

     API_HOST:"/api/"

    })

    prod.env.js

    1

    2

    3

    4

    module.exports = {

     NODE_ENV: '"production"',//生产环境

     API_HOST:'"http://10.1.5.11:8080/"'

    }

    当然不管是开发还是生产环境都可以直接请求http://10.1.5.11:8080//。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,我们在任何组件里都能用process.env.API_HOST来使用地址如:

    1

    instance.post(process.env.API_HOST+'user/login', this.form)

    然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的。某大神说:此方法ie9及以下不好使,如果需要兼容,最好的办法是后端在服务器端口加个代理,效果类似开发时webpack的代理。

    axios发送get post请求问题

    发送post请求时一般都要设置Content-Type,发送内容的类型,application/json指发送json对象但是要提前stringify一下。application/xxxx-form指发送?a=b&c=d格式,可以用qs的方法格式化一下,qs在安装axios后会自动安装,只需要组件里import一下即可。

    1

    2

    3

    4

    const postData=JSON.stringify(this.formCustomer);

    'Content-Type':'application/json'}

    const postData=Qs.stringify(this.formCustomer);//过滤成?&=格式

    'Content-Type':'application/xxxx-form'}

    拦截器的使用

    当我们访问某个地址页面时,有时会要求我们重新登录后再访问该页面,也就是身份认证失效了,如token丢失了,或者是token依然存在本地,但是却失效了,所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误,授权出错,也就是没有权利访问该页面。

    我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    // http request 请求拦截器,有token值则配置上token值

    axios.interceptors.request.use(

      config => {

        if (token) { // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了

          config.headers.Authorization = token;

        }

        return config;

      },

      err => {

        return Promise.reject(err);

      });

    // http response 服务器响应拦截器,这里拦截401错误,并重新跳入登页重新获取token

    axios.interceptors.response.use(

      response => {

        return response;

      },

      error => {

        if (error.response) {

          switch (error.response.status) {

            case 401:

              // 这里写清除token的代码

              router.replace({

                path: 'login',

                query: {redirect: router.currentRoute.fullPath}  //登录成功后跳入浏览的当前页面

              })

          }

        }

        return Promise.reject(error.response.data)

      });

    展开全文
  • vue中axios拦截器的使用

    万次阅读 多人点赞 2018-11-05 15:11:44
    1.拦截器分为request请求拦截器和response响应拦截器 PS:request请求拦截器:发送请求前统一处理,如:设置请求头headers、应用的版本号、终端类型等。 response响应拦截器:有时候我们要根据响应的状态码来进行下...
    1.拦截器分为request请求拦截器和response响应拦截器

    PS:request请求拦截器:发送请求前统一处理,如:设置请求头headers、应用的版本号、终端类型等。
    response响应拦截器:有时候我们要根据响应的状态码来进行下一步操作,例如:由于当前的token过期,接口返回401未授权,那我们就要进行重新登录的操作。

    2.main.js文件中(先安装axios)

    在这里插入图片描述

    import axios from 'axios'
    
    // 给Vue函数添加一个原型属性$axios指向axios(全局使用axios)
    // vue实例中直接用this.$axios就可以执行axios方法
    Vue.prototype.$axios=axios
    
    3.http request 请求拦截器

    PS:发送请求之前判断是否存在token,除了登录页,其他页面请求头headers都添加token

    // http request 请求拦截器
    axios.interceptors.request.use(config => {
    	// 在发送请求之前做些什么
    	let pathname = location.pathname;
    	if(localStorage.getItem('token')){
    		if(pathname != '/' &&  pathname != '/login'){
    			config.headers.common['token'] = localStorage.getItem('token');
    		}
    	}
    	return config;
    }, error => {
    	// 对请求错误做些什么
    	return Promise.reject(error);
    });
    

    在这里插入图片描述

    4.http response 响应拦截器

    PS:若返回401,页面跳转到登录页面

    // http response 响应拦截器
    axios.interceptors.response.use(response => {
     	return response;
    },error => {
     	if (error.response) {
    		switch (error.response.status) {
    			// 返回401,清除token信息并跳转到登录页面
    			case 401:
    			localStorage.removeItem('token');
    			router.replace({
    				path: '/login'
    				//登录成功后跳入浏览的当前页面
    				// query: {redirect: router.currentRoute.fullPath}
    			})
    		}
    		// 返回接口返回的错误信息
    		return Promise.reject(error.response.data);
    	}
    });
    

    在这里插入图片描述

    展开全文
  • 关于vue中axios拦截器的使用

    万次阅读 多人点赞 2018-07-10 15:59:35
    备注:将代码加到页面发现并未起作用,百度谷歌搜索一番,发现都是千篇一律,不同之处可能就是对返回状态码的处理不一样,并未解决拦截器不起作用的问题。在这期间也尝试了将拦截器单独提出来写出一个http.js然后...

    预期目标:解决请求任意接口之前进行统一拦截判断,看是否返回500或404等错误并在页面给出错误提示。

    一、刚开始看官方文档,如下:

         

    备注:将代码加到页面中发现并未起作用,百度谷歌搜索一番,发现都是千篇一律,不同之处可能就是对返回状态码的处理不一样,并未解决拦截器不起作用的问题。在这期间也尝试了将拦截器单独提出来写出一个http.js然后再将其挂载到vue的原型上,还是不能解决问题。

    二、尝试配置全局的baseURL,代码如下:

    备注:可以进入拦截器并作出响应,解决了拦截器不起作用的问题,但是这样写又存在另外一个问题,因为我们整个项目的接口配置采用的是创建axios实例的方式,难以实现对每个接口固定ip进行统一配置的操作,如果改动代码的话较为麻烦。

    结果:虽然可以拦截,但无法拦截每一个接口的请求,只是拦截了全局配置baseURL

    三、为自己创建的axios实例添加拦截器,解决问题

    备注:也就是说,官方文档上的axios.interceptors写法,针对的是全局的baseURL,而我们之前没有配置全局的baseURL,一开始检测不到就老是报错,结果配置了全局的好了但是达不到我们的使用要求。

    结果:如果说,你采用的是创建实例的方法进行整个api接口的配置管理,那就要用实例名称点interceptors的方式去添加拦截器,而不是axios.interceptors

    四、如果想要在响应里面做路由跳转,则需要引入路由配置文件

     

    展开全文
  • 具体问题:在项目的登陆功能中需要保存token进行身份验证,在前端axios拦截器中定义的代码如下: Vue.prototype.axios = axios.create({ baseURL: 'http://localhost:3000/admin/', headers: { 'Authorization':''...

    关于axios请求拦截器的遇到的问题

    记录一下自己在项目中遇到的深坑。
    具体问题:在项目的登陆功能中需要保存token进行身份验证,在前端axios拦截器中定义的代码如下:

    Vue.prototype.axios = axios.create({
      baseURL: 'http://localhost:3000/admin/',
      headers: {  'Authorization':''}
    })
    axios.interceptors.request.use(config => {
    	//在本地存储中拿到的token值
      const token = localStorage.token
      if (token !== null) {
        config.headers.Authorization = 'Bearer' + token
      }
      return config
    }, err => {
      return Promise.reject(err)
    })
    

    实际遇到的问题显示:代码没有报错,但是数据请求依旧没有请求头,经过我一个多小时的努力!!!!!!!终于发现了问题

    Vue.prototype.axios = axios.create({
      baseURL: 'http://localhost:3000/admin/',
      headers: {  'Authorization':''}
    })
    

    问题出现在这行代码中,具体什么原理不知道。但是只需要将这行代码改为如下

    Vue.prototype.axios = axios
    
    axios.defaults.baseURL = 'http://localhost:3000/admin/api'
    axios.defaults.headers.common['Authorization'] = ''
    
    

    token成功加到请求头上。

    展开全文
  • Vue axios 拦截器的封装

    千次阅读 2020-01-02 16:42:16
    vue项目,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。 一 . ...
  • 今天写项目封装axios中发现一个问题,开始给get自定义加请求头没问题 config.headers = {‘language’:‘Chinese’};,访问的通数据也及时返回了 后面写post请求需要加一个 config.headers = {‘Content-Type’:...
  • 主要介绍了vue+axios 拦截器实现统一token的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vueaxios拦截器token刷新机制的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue+axios拦截器配置

    2021-04-14 09:56:39
    vue+axios拦截器配置 import axios from "axios"; import QS from "qs"; // import store from '../store/index' import { Message } from "element-ui"; import router from "../router/index"; // 环境的切换 // ...
  • vue项目axios拦截器

    2019-08-06 16:02:26
    拦截器:发送或响应请求之前,做一些需要判断的事情,比如发送某些请求需要携带token,可在请求拦截器中配置token;响应某些请求后,需要对获取的数据进行解密或在请求前做一些其他操作。 具体实现如下: 添加拦截器...
  • vueaxios拦截器

    2018-08-27 21:37:10
    借助axios拦截器实现Vue.js登陆状态校验的思路     在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问。 那么...
  • 25、Vue-axios拦截器

    多人点赞 2020-08-08 08:37:58
    25、Vue-axios拦截器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行找的皮卡丘</title> <style type="text/css"> .spinner { width: ...
  • 主要Vue使用Axios拦截器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue中使用axios拦截器 axios拦截器如何单独配置token 在了解到cookie、session、token的作用后学习token的使用 cookie cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在...
  • vue配合axios拦截器

    2018-08-03 15:55:24
    设置 Axios 拦截器 我选用的 HTTP 请求套件是 axios。为了达到无痛刷新 token 的效果,我们需要对 axios 定义一个拦截器,用以接收我们刷新的 Token,代码如下: app.js import Vue from 'vue' import router ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,604
精华内容 5,441
关键字:

vue中axios拦截器

vue 订阅