前两天项目中遇到了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. 安装vue开发环境

    每次搜索vue开发环境安装时,总是有很多种版本,虽然都能安装完成,但还是整理下自己觉得比较好的版本吧 1.首先安装nodeJs以及也把git安装好(反正开发也是需要git),安装完成后执行 node ...

  2. AppBoxFuture: Raft快照及日志截断回收

      AppBoxFuture的存储引擎依赖Raft一致性协议来保证各个分区副本的一致性,如果不处理Raft日志将不断增长,因此需要特定的机制(定期或每处理一定数量的日志)来回收那些无用的日志数据.通过 ...

  3. opencv目标检测之canny算法

    canny canny的目标有3个 低错误率 检测出的边缘都是真正的边缘 定位良好 边缘上的像素点与真正的边缘上的像素点距离应该最小 最小响应 边缘只能标识一次,噪声不应该标注为边缘 canny分几步 ...

  4. js 跳转链接的几种方式

    1.跳转链接 在当前窗口打开 window.location.href="http://www.baidu.com" 等价于 <a href="baidu.com& ...

  5. CSS 换行

    默认情况下,元素的属性是 white-space:normal:自动换行:(不把单词截断,会把单词看作一个整体) -----但是但是但是但是..当元素中的内容是一对没有空格的字符/数字时,超过容器宽度 ...

  6. navicat工具 pymysql模块

    目录 一 IDE工具介绍(Navicat) 二 pymysql模块 一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具,我们使用Navi ...

  7. Ionic2优于Ionic1的6个理由

    经历了一个从0到有的app的开发,我已经很熟悉Ionic1了,在此期间我曾发现过Ionic1的一些bug,和一些不合理的地方(根基版本 不同,后续我会陆续发表这些文章),我甚至在此期间对Ionic1进 ...

  8. JAVA MyBatis配置文件用properties引入外部配置文件

    方式一:通过properties 元素的子元素来传递数据 例如: <properties> <property name="driver" value=" ...

  9. BZOJ 4621: Tc605

    Description 最初你有一个长度为 N 的数字序列 A.为了方便起见,序列 A 是一个排列. 你可以操作最多 K 次.每一次操作你可以先选定一个 A 的一个子串,然后将这个子串的数字全部变成原 ...

  10. SD卡学习笔记

    最近调试了SD卡,遇到了一些小问题,记录一下,分享一下. 1.    SD卡 卡槽旁边的一个小开关 我们平时见过的SD卡都是小的SD卡,可以放在手机上的.现在大多数的开发板上也是小的SD卡的卡槽,插入 ...