前两天项目中遇到了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. python常用数据结构讲解

    一:序列     在数学上,序列是被排成一排的对象,而在python中,序列是最基本的数据结构.它的主要特征为拥有索引,每个索引的元素是可迭代对象.都可以进行索引,切片,加,乘,检查成员等操作.在py ...

  2. jenkins自动化部署项目2 --插件的选择和安装

    一.安装插件: 我选择的安装建议的插件,也可以自定义安装自己想要的插件,在不敢保证自己确定要用的插件是完全正确的情况下建议按推荐安装 我理解的jenkins+tomcat完成自动化部署maven项目需 ...

  3. Selenium+python上传本地文件或者图片

    基于input标签的,有属性type = file: 首先定位到点击上传的元素(input)然后直接使用send_keys()将文件在本地的路径传进去 代码如下(例子来源于本页面上传图片和文件): f ...

  4. 《图解HTTP》读后记

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

  5. Spring 梳理-MVC-配置DispatcherServet和ContextLoaderListener

    在使用JavaConfig时,AbstractAnnotationConfigDispatcherServletInitializer会自动注册 DispatcherServlet 和 Context ...

  6. Ceph 的 'MAX AVAIL' 和 数据平衡 - Storage 6

    1. 客户环境 节点数量:4个存储节点 OSD数量:每个节点10块8GB磁盘,总共 40 块OSD Ceph 版本: Storage 6 使用类型:  CephFS 文件 CephFS数据池:  EC ...

  7. 在window里面安装ubuntu子系统并安装图形化界面

    一.开启windows子系统 1. 在win10设置里面开启开发人员选项 (设置-->更新安全--> 开发者选项  )选择开启 2.在控制面板里面开启windows子系统 (启用或关闭wi ...

  8. python爬虫——简易天气爬取

    通过爬虫,抓取http://www.weather.com.cn的天气信息 功能——输入城市代码,获取当日天气,简单的beautifulsoup和requests实现.(城市代码可百度查询,不全部展示 ...

  9. phaser学习总结之Tween详解

    前言 在上一章phaser学习总结之phaser入门教程中,我们已经初步入门了phaser,并通过一个案例了解了phaser,现在我们需要对phaser中的对象进行讲解,本章需要讲解的是tween,即 ...

  10. 【JZOJ5329】-时间机器

    [JZOJ5264]化学 Description Input Output Sample Input 3 10 1 2 10 Sample Output 5 Hint 题解: 这个题目又是一道贪心题, ...