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 ...
随机推荐
- MAC中Composer的使用
安装composer 安装前需确保系统PHP版本在5.3以上,在终端中执行以下命令下载Composer可执行文件: curl -sS https://getcomposer.org/installer ...
- jenkins离线安装插件的方法(无法访问外网)
最近项目要迁移环境,无法访问外网,因此jenkins的安装配置需要离线操作,在此记录 jenkins下载安装好之后,跳过插件的安装,新建用户进入jenkins界面,这些前置步骤我在之前的随笔里有写具体 ...
- selenium-01-简介
一.Selenium是什么? Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,本系列现在主要包括以下4款: 1.Selenium Core:支持DHTML的测试案 ...
- c# 9.0 特性提案 简化空参数验证代码
简而言之就是将已存在的特性null参数验证,使用一个简单的语义标注进一步简化. 对于如下这段代码 // Before void Insert(string s) { if (s is null) { ...
- 百度富文本编辑器ueditor添加到pom
<!-- 百度富文本编辑start --> <dependency> <groupId>com.baidu</groupId> <artifact ...
- 阿里云服务器CentOS6.9安装Ant
下载地址:http://mirrors.hust.edu.cn/apache/ant/binaries/ 1.下载 2.上传到服务器(非root用户下) 3.解压移动目录(root用户下) tar - ...
- 并发编程之多线程(Java)
一.线程与进程区别 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以线程基本上是 ...
- Ocelot自定义管道中间件
Ocelot是啥就不介绍了哈,网关大家都知道,如果大家看过源码会发现其核心就是由一个个的管道中间件组成的,当然这也是Net Core的亮点之一.一个请求到来,会按照中间件的注册顺序进行处理,今天的问题 ...
- Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单(取值、赋值、校验和是否可编辑等)
1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...
- Vue三步完成跨域请求
三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Pa ...