项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置。
// util.js
import axios from 'axios'
import cookies from 'vue-cookies'
import router from 'vue-router'
export const $axios = axios.create({ // 这里是配置项
timeout: ,
}) // 拦截请求
$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 :
// 这里写清除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

axios实现拦截器的更多相关文章

  1. axios请求,拦截器的使用

    1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...

  2. axios的拦截器(Interceptors)

    axios 的拦截器:interceptors 如果我们想在请求之前做点什么,用拦截器再好不过了 拦截器一般做什么? 1. 修改请求头的一些配置项 2. 给请求的过程添加一些请求的图标 3. 给请求添 ...

  3. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  4. axios 基于拦截器的取消(重复)请求

    axios 基于拦截器的取消(重复)请求 // 添加请求拦截器 axios.interceptors.request.use((config) => { // 准备发请求之前, 取消未完成的请求 ...

  5. Axios使用拦截器全局处理请求重试

    Axios拦截器 Axios提供了拦截器的接口,让我们能够全局处理请求和响应.Axios拦截器会在Promise的then和catch调用前拦截到. 请求拦截示例 axios.interceptors ...

  6. axios请求拦截器

    import axios from 'axios';   // 创建axios实例   let service = null;   if (process.env.NODE_ENV === 'deve ...

  7. vue中axios使用一:axios做拦截器

    转载请注明出处: 项目中用到了单点登录,依赖的公司通用的jar包,且项目为前后端分离的方式,为了管理系统的所有请求和 超时管理,用到了axios,做前端请求拦截,并做管理. 其有以下特点: axios ...

  8. axios 设置拦截器 全局设置带默认参数(发送 token 等)

    应用场景: 1,每个请求都带上的参数,比如token,时间戳等. 2,对返回的状态进行判断,比如token是否过期 代码如下: [javascript] view plain copy axios.i ...

  9. axios请求拦截器(修改Data上的参数 ==>把data上的参数转为FormData)

    let instance = axios.create({ baseURL: 'http://msmtest.ishare-go.com', //请求基地址 // timeout: 3000,//请求 ...

随机推荐

  1. Intellij IDEA配置PHP开发环境

    Intellij IDEA是一款非常强大的编译器,能很好地支持JavaHTML CSS等.当然,加入PHP语言也是小菜一碟~ 环境: Windows 7.Intellij IDEA 2016.2.5. ...

  2. Shell脚本编程(三):shell参数传递

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以下实例我们向脚本传递三 ...

  3. SQL2008R2的 遍历所有表更新统计信息 和 索引重建

    [2.以下是更新统计信息] DECLARE UpdateStatisticsTables CURSOR READ_ONLY FOR SELECT sst.name, Schema_name(sst.s ...

  4. 【原创 Hadoop&Spark 动手实践 3】Hadoop2.7.3 MapReduce理论与动手实践

    开始聊MapReduce,MapReduce是Hadoop的计算框架,我学Hadoop是从Hive开始入手,再到hdfs,当我学习hdfs时候,就感觉到hdfs和mapreduce关系的紧密.这个可能 ...

  5. ZOJ 3886 Nico Number(筛素数+Love(线)Live(段)树)

    problemCode=3886">ZOJ 3886 题意: 定义一种NicoNico数x,x有下面特征: 全部不大于x且与x互质的数成等差数列,如x = 5 ,与5互素且不大于5的数 ...

  6. 告别GOPATH,快速使用 go mod(Golang包管理工具)

    https://studygolang.com/articles/17508?fr=sidebar 文中的wserver为module名,route为本地的包名,go.mod所在的目录名不一定非要和m ...

  7. Linux下批量Kill多个进程

    ps -ef|grep php|grep -v grep|cut -c 9-15|xargs kill -9 管道符"|"用来隔开两个命令,管道符左边命令的输出会作为管道符右边命令 ...

  8. 运用kmp算法解决的一些问题的简单题解

    学习kmp算法我最后是看的数据结构书上的一本教材学会的..我认为kmp相对于普通的BF算法就是避免了非常多不必要的匹配.而kmp算法的精髓自然就在于next数组的运用...而next数组简而言之就是存 ...

  9. HTTPS原理和CA证书申请(转)

    原文地址:http://blog.51cto.com/11883699/2160032 众所周知,WEB服务存在http和https两种通信方式,http默认采用80作为通讯端口,对于传输采用不加密的 ...

  10. 字符串匹配的 KMP算法

    一般字符串匹配过程 KMP算法是字符串匹配算法的一种改进版,一般的字符串匹配算法是:从主串(目标字符串)和模式串(待匹配字符串)的第一个字符开始比较,如果相等则继续匹配下一个字符, 如果不相等则从主串 ...