前两天项目中遇到了token拦截,需要在请求的header头里放置token,需要用到response拦截,调试过程中遇到了拿不到token的问题

 我用的axios实例

 let token = store.state.token
instance.interceptors.request.use(config => { // 在发送请求之前做些什么
//判断是否存在token,如果存在将每个页面header都添加token
config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
// console.log('token===>',store.state.token);
if(token!==''){
config.headers.common['token'] = token;
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

总是拿不token

后来根据请求步骤一步步检查发现

取token应该放到reponse拦截内,放到拦截外因为初始化登录页的时候api已经被调用,这时候还没拿到token。所以token是空的

正确的代码应该是

 instance.interceptors.request.use(config => {
let token = store.state.token
// 在发送请求之前做些什么
//判断是否存在token,如果存在将每个页面header都添加token
config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
// console.log('token===>',store.state.token);
if(token!==''){
config.headers.common['token'] = token;
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

完美拿到了token,可是token过期登录时总是提示 'router' is not defined 或者是 ‘router’ is not token

原因是由于单独调用的axios无法正常获取router

我用了最简单的方法,绕过router

// http response 拦截器
let self = this
instance.interceptors.response.use(
response => {
if (response) {
if (response.data.status == "401") {
store.commit('del_token');
window.location.href='#/login'
// window.routes.push({
// path: '/login', // // query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
// })
}
}
return response
},

完美解决!

axios reponse请求拦截以及token过期跳转问题的更多相关文章

  1. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  2. axios设置请求拦截和响应拦截

    首先我们先创建axios实例 const service = axios.create({ baseURL: url, //是用于请求的服务器 URL timeout: 5000, // 请求超时时间 ...

  3. 细说vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...

  4. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  5. token回话保持,axios请求拦截和导航守卫以及token过期处理

    1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...

  6. axios源码解析 - 请求拦截器

    axios请求拦截器,也就是在请求发送之前执行自定义的函数. axios源码版本 - ^0.27.2 (源码是精简版) 平时在业务中会这样去写请求拦截器,代码如下: // 创建一个新的实例 var s ...

  7. Vue 消除Token过期时刷新页面的重复提示

    1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...

  8. vue中 请求拦截 响应拦截设置

    第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...

  9. vue中前端处理token过期的方法与axios请求拦截处理

    在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...

随机推荐

  1. LoadRunner11.安装破解

    Loadrunner安装及破解   一. 安装 1. 将ISO文件导入,打开光驱,运行“setup.exe” 2. 点击安装,部分机器会提示缺少“Microsoft Visual C++ 2005 S ...

  2. JS思考遍历对象

    var json={ “name”:”小明”, “age”:”10”, “sex”:”男” } for(var key in json); //key只是个变量名 console.log(key); ...

  3. Android开发——Toolbar常用设置

    本篇笔记用来记录常用的Toolbar设置,如Toolbar颜色设置,显示返回按钮,显示右边三个点按钮 之前Android 使用的ActionBar,Android5.0开始,谷歌官方推荐使用Toolb ...

  4. C++之路 #1

    一.C++介绍C++是C语言的继承,它可以进行以抽象数据类型为特点的基于对象的程序设计,还可以进行以继承和多态为特点的面向对象的程序设计.C++擅长面向对象程序设计的同时,还可以进行基于过程的程序设计 ...

  5. kotlin系列文章 --- 2.基本语法

    函数 函数定义使用fun关键字,参数格式为:参数:类型,需要声明返回类型 fun sum(a:Int, b:Int): Int{ return a+b } 表达式作为函数体,返回值类型自动推断 fun ...

  6. 10个值得深思的_PHP_面试问题

    Q1 第一个问题关于弱类型 $str1 = 'yabadabadoo'; $str2 = 'yaba'; if (strpos($str1,$str2)) { echo "\"&q ...

  7. 设置Activity全屏的方法:

    1)代码隐藏ActionBar 在Activity的onCreate方法中调用getActionBar.hide();即可 2)通过requestWindowFeature设置 requestWind ...

  8. 爬虫之beautifulsoup篇之一

    一个网页的节点太多,一个个的用正则表达式去查找不方便且不灵活.BeautifulSoup将html文档转换成一个属性结构,每个节点都是python对象.这样我们就能针对每个结点进行操作.参考如下代码: ...

  9. Have a Good Attitude 良好的态度

    Poor attitudes lead to poor communication. Poor communication leads to poor service. Poor service le ...

  10. Vue-cli中axios传参的方式以及后端取的方式

    0917自我总结 Vue-cli中axios传参的方式以及后端取的方式 一.传参 params是添加到url的请求字符串中的,用于get请求. data是添加到请求体(body)中的, 用于post请 ...