vue axios拦截跳转
第一步:添加需要拦截的页面

{
path: '/control',
name: 'Control',
meta: {
requireAuth: true
},
第二步:页面拦截
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (!(Object.keys(store.state.userInfo).length === 0)) { // 通过vuex state获取当前的token是否存在
iView.LoadingBar.start()
next()
} else {
next({
path: '/login',
query: {
redirect: to.fullPath
} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
} else {
iView.LoadingBar.start()
next()
}
})
第三步:后台返回拦截
if (res.data.code !== 0) {
Message.info(res.data.msg)
}
if (res.data.code === 401) {
router.replace({
path: 'login',
query: {
redirect: router.currentRoute.path
}
})
Message.info('已掉线,请重新登录')
}
拦截全部做完,祝你好运!!!
vue axios拦截跳转的更多相关文章
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue axios路由跳转取消所有请求 和 防止重复请求
直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- vue axios 拦截器
前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...
- vue axios拦截器介绍
关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...
- vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...
- vue axios拦截器加全局loading
import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...
- Vue+axios 拦截,超时登录问题
axios.interceptors.request.use(config => config, error => Promise.reject(error)); axios.interc ...
- axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)
Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...
随机推荐
- 2016 ACM-ICPC NEERC F. Foreign Postcards (概率DP)
2016 ACM-ICPC NEERC F. Foreign Postcards 题意:有一串由C.W组成的字符串,每次截取长度为k(1<=k<=n且k随机)的前缀,如果该前缀首位为W,则 ...
- Linux设备驱动程序 之 重要数据结构
文件对象 文件对象是进程已经打开文件描述符的内存中的表示,单个文件可能有多个表示打开文件描述符的file结构: struct file { union { struct llist_node fu_l ...
- JS基础_数组的遍历
遍历:将数组中所有的元素都取出来 1.for循环 var arr = ["1","2","3"]; for(let i=0;i<arr ...
- Nginx之编写HTTP模块
1. 常用数据结构 1.1 ngx_str_t typedef struct { /* * 字符串的有效长度 */ size_t len; /* * 有效字符串的起始地址,该字符串通常并不以'\0'结 ...
- springboot多个数据源
1.启动两个mysql,可以按照如下操作使用docker来部署mysql容器,比较简单 https://www.cnblogs.com/qq931399960/p/11527222.html 2.如果 ...
- SpringCloud(五)之Spring Cloud 中 Feign结合Hystrix断路器开发实战
1.先讲hystrx(断路器) 在springcloub 中的使用 1.1 加入依赖 注意:网上新旧版本问题,所以要以官网为主,不然部分注解会丢失最新版本 2.0 <dependency> ...
- Web前端性能优化-重绘与回流
1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 ...
- 用Red5搭建支持WEB播放的实时监控视频
用Red5搭建支持WEB播放的实时监控视频 1. 下载Red5:https://github.com/Red5/red5-server/releases 下载了Red5 1.0.6 release的Z ...
- Jenkins权限设计错误解决办法
https://www.cnblogs.com/yangxia-test/p/4368778.html https://blog.csdn.net/xlyrh/article/details/5138 ...
- maven 编译,测试,打包和安装工程
编译工程,使用命令mvn compile 测试工程,使用命令mvn test 测试和编译工程,使用命令mvn test-compile 打包工程,使用命令mvn package,将工程打包成jar\w ...