vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助。
首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了:
router.beforeEach((to, from, next) => { iView.LoadingBar.start();
//Util.title(to.meta.title, router.app);
Util.title(to.meta.title); if (Cookies.get('locking') === '1' && to.name !== 'locking') { // 判断当前是否是锁定状态
next({
replace: true,
name: 'locking'
});
} else if (Cookies.get('locking') === '0' && to.name === 'locking') {
next(false);
} else { if (!Cookies.get('status') && to.name !== 'login') { // 判断是否已经登录且前往的页面不是登录页
//alert('登录过期!请重新登录!'); next({
name: 'login'
});
} else if (Cookies.get('status') && to.name === 'login') { // 判断是否已经登录且前往的是登录页
Util.title();
next({
name: 'home_index'
});
} else {
Util.toDefaultPage(routers, to.name, router, next);
next();
}
}
// }) // } });
路由拦截过后,当然就到了axios的拦截,在每次的后台请求中拦截一次判断后台token是否过期:
//请求时的拦截
util.ajax.interceptors.request.use(function(config){
const token = Cookies.get('status');
if (token) {
// config.headers.common['Authorization'] = token;
config.headers.Authorization = token;
}
return config
},function(error){ return Promise.reject(error);
}); //响应时的拦截
util.ajax.interceptors.response.use(response => {
//对响应数据做操作
if (response.data.msg == '登录失效') { //这里是判断后台的token是否过期 Cookies.remove("status"); //如果过期则清除前端的token并跳转到登录页
//这里需要说明一下,如果你是用的是hash模式,使用下面的就可以了 ,如果使用的是history 模式则使用window.location.href='/login';就可以了
window.location.href='#/login';
}
return response; },error => {
//对响应数据错误做操作
debugger
if(response.data.code == 1000000) { Cookies.remove("status");
window.location.href='#/login' return Promise.reject(response);
}
return Promise.reject(error);
});
axios的拦截我是写在util.js的文件中的;
下面是我的公众号,欢迎大家关注,可以一起学习一起进步:
vue中前端处理token过期的方法与axios请求拦截处理的更多相关文章
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- vue中push()和splice()的使用方法
vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...
- vue 路由拦截、axios请求拦截
路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...
- vue中常见的问题以及解决方法
有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- vue中前端弹窗队列展示
在前端写一个弹窗可能很简单,那如果同时有多个弹窗呢 这样的话就要考虑弹窗的展示问题,肯定是不能叠加在一起的,这时候就要通过队列(先进先出)来展示 思路就是根据队列来实现,至于具体的实现方式,可以在项目 ...
- 用Vue中遇到的问题和处理方法(一)
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- 用Vue中遇到的问题和处理方法
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
随机推荐
- stm32_ADC定时器采样(DMA均值处理数据)
在有些要求高的场合,需要用到定时器采样.本人在网上没找到合适的源码,于是将自己的思路分享出来,欢迎大家提出意见. 确定ADC采用的通道对应的通道 确定采样对应的引脚(这个在规格书的引脚定义部分可以找到 ...
- 利用AMPScript获取Uber用户数据的访问权限
现代项目开发和资产管理方法正在不停地快速变化.在这场创新和扩张的竞赛中,新资产被迅速部署并暴露于公共互联网,已有资产也在不断发展. 要跟上这个不断变化的攻击面是很难的,更不用说保护这些应用程序和系统了 ...
- git备注
下拉仓库 git clone ""建立本地分支 git checkout -b "分支名字" 修改代码以后切换到主分支 git checkout master更 ...
- FB面经 Prepare: Make Parentheses valid
给一组括号,remove最少的括号使得它valid 从左从右各scan一次 package fb; public class removeParen { public static String fi ...
- 自动化运维工具——ansile详解
自动化运维工具——ansible详解(一) 目录 ansible 简介 ansible 是什么? ansible 特点 ansible 架构图 ansible 任务执行 ansible 任务执行模式 ...
- Python 冒泡排序、归并排序、快速排序
冒泡排序 原理: 代码: def bubble_sort2(arr):for j in range(len(arr) - 1, 0, -1): # [n-1, n-2, ....2, 1]for i ...
- maven配置国内阿里云镜像
<mirrors> <mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> ...
- php读取文件使用redis的pipeline(管道)导入大批量数据
需求:需要做一个后台上传TXT文件,读取其中的内容,然后导入redis库中.要求速度快,并且支持至少10W以上的数据,而内容也就一个字段存类似openid和QQ 传统做法:我一开始做的时候就老套路,遍 ...
- java线程学习之synchronized关键字
关键字synchronized的作用是实现线程间的同步.它的任务是对同步的代码加锁.一个代码块同时只能有同一个线程进行读和写操作,从而保证线程间是安全的. 线程安全的概念是:当多个线程访问某一个类(对 ...
- Python爬虫与一汽项目【一】爬取中海油,邮政,国家电网问题总结
项目介绍 中国海洋石油是爬取的第一个企业,之后依次爬取了,国家电网,中国邮政,这三家公司的源码并没有多大难度, 采购信息地址: 国家电网电子商务平台 http://ecp.sgcc.com.cn/pr ...