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 传数据给子组 ...
随机推荐
- pwn学习日记Day1 基础知识积累
ida / od 窗口(针对od操作) 反汇编窗口:显示被调试程序的反汇编代码,标题栏上的地址.HEX 数据.反汇编.注释可以通过在窗口中右击出现的菜单 界面选项->隐藏标题 或 显示标题 来进 ...
- 22.C# 事件
1.事件的含义 事件和异常类似,它们都是由对象引发,我们可以提供代码处理它们.不同的是事件并没有使用try ..catch这样的代码来处理,而是要订阅事件,订阅的含义是提供一段事件处理代码,在事件发送 ...
- 递归函数 Vue ElementUI
对树形菜单的递归操作,首先应该对树形菜单数据进行整理,优化成自己需要的类型 比如Vue + ElementUI的动态侧边栏数据 export function routerRoleToPretty ( ...
- Android -- 《 最美有物》好看的点赞效果
1,前天在鸿洋的公众号上看到一款不错的点赞效果,是仿最美有物的点赞,再加上自己最近学习状态很差,自己想着通过这个效果练手一下,果然,花了整整两天的时间,按照以前的效率的话一天就够了,哎,已经调整了一个 ...
- js列表添加内容清除内容,时钟
<div id="wai"> <div id="zuo"> <select multiple="multiple&quo ...
- Typora/VSCode/Sublime 更改Markdown默认宽度样式等
Typora 所见即所得Markdown编辑器更改 最大宽度 C:\Users\Desk\AppData\Roaming\Typora\themes\github.css CSS第46行改为 max- ...
- pandas 时间格式转换
OUTLINE 常见的时间字符串与timestamp之间的转换 日期与timestamp之间的转换 常见的时间字符串与timestamp之间的转换 这里说的字符串不是一般意义上的字符串,是指在读取日期 ...
- SynchronousQueue------TransferQueue源码分析
不像ArrayBlockingQueue.LinkedBlockingDeque之类的阻塞队列依赖AQS实现并发操作,SynchronousQueue直接使用CAS实现线程的安全访问.由于源码中充斥着 ...
- c# WebApi之接口返回类型详解
c# WebApi之接口返回类型详解 https://blog.csdn.net/lwpoor123/article/details/78644998
- java个内部类的总结
内部类的概念 成员内部类 访问成员内部类格式: 案例 局部内部类 案例 静态内部类 访问格式: 案例 匿名内部类 格式: 案例 内部类的概念 将类定义在类的内部,那么该类就成为内部类 注意: 内部类是 ...