前两天项目中遇到了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. Spring Boot2 系列教程(八)Spring Boot 中配置 Https

    https 现在已经越来越普及了,特别是做一些小程序或者公众号开发的时候,https 基本上都是刚需了. 不过一个 https 证书还是挺费钱的,个人开发者可以在各个云服务提供商那里申请一个免费的证书 ...

  2. Scala Basis

    基础 Scala 中数据类型也是 class 7 种数值类型: Byte, Char, Short, Int, Long, Float, and Double Boolean 类型 原始类型与 cla ...

  3. 《图解HTTP》读后记

    看了一遍又一遍…………不如记一下 用做笔记的方式来看,发现了好多之前没发现的知识点.....感觉前几次看了跟没看一样... 1.1HTTP通常被译为超文本传输协议,但这种译法并不严谨.严谨的译名应该为 ...

  4. Python学习笔记整理总结【Django】:Form组件

     Form组件  Django的Form主要具有一下几大功能: --生成HTML标签 --验证用户数据(显示错误信息) --HTML Form提交保留上次提交数据 --初始化页面显示内容 1.内置字段 ...

  5. 设计模式-Builder和Factory模式区别

    Builder和Factory模式区别 Builder模式结构: Factory模式一进一出,Builder模式是分步流水线作业.当你需要做一系列有序的工作或者按照一定的逻辑来完成创建一个对象时 Bu ...

  6. Python 设计和历史的 27 个问题

    花下猫语: 先祝大家假期快乐!今天,我要分享一篇长文,选自 Python 的官方文档.它列举了 27 个设计及历史的问题,其中有些问题我曾经分享过,例如为什么使用显式的 self.浮点数的问题.len ...

  7. LINUX系统学习以及初学者系统下载

    Linux系统常用命令大全 来源:服务器之家 [博客中所有文章如有不对的地方希望看官们指出,有问题也可以提出来相互交流,相互学习,感谢大家!] 初学者建议安装:sentOS Ubuntu系统下载连接h ...

  8. pywintypes.com_error: (-2147352567, '发生意外 解决方案

    在使用win32com处理Excel的时候,遇到pywintypes.com_error: (-2147352567 错误. 百度.Google各种方法不得其解,和以下网页类似——http://blo ...

  9. TensorFlow2.0(五):张量限幅

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  10. 夯实Java基础系列22:一文读懂Java序列化和反序列化

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...