博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
axios实现拦截器
阅读量:5239 次
发布时间:2019-06-14

本文共 1092 字,大约阅读时间需要 3 分钟。

 

项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置。
// util.jsimport axios from 'axios'import cookies from 'vue-cookies'import router from 'vue-router'export const $axios = axios.create({ // 这里是配置项  timeout: 7000,})// 拦截请求$axios.interceptors.request.use(  config => {    console.log(config);    let t = cookies.get('t')    if (t) {      config.headers.t = t    } else {      router.replace({path: '/login'})    }    return config  },  err => {    return Promise.reject(err)  })// 拦截响应$axios.interceptors.response.use(  response => {    console.log(response)    return response  },  err => {    console.log(err);    if (err.response) {      switch (err.response.status) {        case 401:          // 这里写清除token的代码          router.replace({            path: 'login',            query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面          })      }    }    return Promise.reject(err)  })

使用

import Vue from 'vue'import {$axios} from './assets/lib/util'Vue.prototype.$http = $axios

 

转载于:https://www.cnblogs.com/xtjatswc/p/10329816.html

你可能感兴趣的文章
架构图-模型
查看>>
黑马程序员_Java基础枚举类型
查看>>
UIImage 和 iOS 图片压缩UIImage / UIImageVIew
查看>>
疯狂JAVA16课之对象与内存控制
查看>>
django ORM创建数据库方法
查看>>
php7 新特性整理
查看>>
RabbitMQ、Redis、Memcache、SQLAlchemy
查看>>
知识不是来炫耀的,而是来分享的-----现在的人们却…似乎开始变味了…
查看>>
口胡:[HNOI2011]数学作业
查看>>
数据库锁机制及乐观锁,悲观锁的并发控制
查看>>
03 线程池
查看>>
手机验证码执行流程
查看>>
设计模式课程 设计模式精讲 2-2 UML类图讲解
查看>>
Silverlight 的菜单控件。(不是 Toolkit的)
查看>>
初识lua
查看>>
jquery的contains方法
查看>>
linux后台运行和关闭SSH运行,查看后台任务
查看>>
CAN总线波形中ACK位电平为什么会偏高?
查看>>
MyBatis课程2
查看>>
桥接模式-Bridge(Java实现)
查看>>