axios reponse请求拦截以及token过期跳转问题
前两天项目中遇到了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过期跳转问题的更多相关文章
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- axios设置请求拦截和响应拦截
首先我们先创建axios实例 const service = axios.create({ baseURL: url, //是用于请求的服务器 URL timeout: 5000, // 请求超时时间 ...
- 细说vue axios登录请求拦截器
当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- token回话保持,axios请求拦截和导航守卫以及token过期处理
1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...
- axios源码解析 - 请求拦截器
axios请求拦截器,也就是在请求发送之前执行自定义的函数. axios源码版本 - ^0.27.2 (源码是精简版) 平时在业务中会这样去写请求拦截器,代码如下: // 创建一个新的实例 var s ...
- Vue 消除Token过期时刷新页面的重复提示
1.问题现象 页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...
- vue中 请求拦截 响应拦截设置
第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...
- vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
随机推荐
- [LeetCode] 面试题之犄角旮旯 第叁章
题库:LeetCode题库 - 中等难度 习题:网友收集 - zhizhiyu 此处应为一个简单的核心总结,以及练习笔记. 查找一个数“在不在”?桶排序理论上貌似不错. 回文问题 ----> [ ...
- Android之SOAP协议与WebService服务器交互,解决超时的问题
网络搜索大部分不能实际解决问题.特意将解决方法写下.创建MyAndroidHttpTransport 类 , package com.example.omhandroid.lib; import or ...
- css或Angular框架限制文本字数
提需求的来了 某一期产品迭代时,新增了一个小功能,即:在单元格中的文本内容,字符超过20个字的时候,需要截断,并显示20个字符+一个省略号,未超过,无视. 这需求看上去不怎么复杂,看起来可以用css做 ...
- Spring Cloud Config 配置中心实践过程中,你需要了解这些细节!
本文导读: Spring Cloud Config 基本概念 Spring Cloud Config 客户端加载流程 Spring Cloud Config 基于消息总线配置 Spring Cloud ...
- FastDfs之StorageServer的详细配置介绍
#这个配置文件是否失效 disabled=false #false为有效 true为无效 # 本storage server所属的group名 group_name=group1 # 可以版定一个ip ...
- Docker系列(四):容器之间的网络通信
首先我们需要知道:两个容器要能通信,必须要有属于同一个网络的网卡. 先来看下正常情况下我们的容器默认是否是能通信的,这里运行两个测试容器: docker run -it --name=bbox1 bu ...
- 高效解决「SQLite」数据库并发访问安全问题,只这一篇就够了
Concurrent database access 本文译自:https://dmytrodanylyk.com/articles/concurrent-database/ 对于 Android D ...
- VS2010连接Oracle配置
直接看上图.EZ连接和TNS连接.TNS连接要修改tnsnames.tns文件内部的host为服务器地址
- 再探vue
1. vue项目搭建 搭建vue环境需要安装node软件,node是由c++编写而成,主要运行js文件或者js代码的,安装node会自动安装一个管理器叫npm,建议换源下载,国外的网站较慢(比如cnp ...
- LitePal的查询
转载:http://blog.csdn.net/guolin_blog/article/details/40153833 传统的查询数据方式 其实最传统的查询数据的方式当然是使用SQL语句了,Andr ...