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 ...
随机推荐
- 2017 ZSTU寒假排位赛 #4
题目链接:https://vjudge.net/contest/148543#overview. A题:n个罪犯,每个人有一个犯罪值,现在要从里面选出连续的c个人,每个人的犯罪值都不能超过t,问选法的 ...
- HDU 4496 D-City —— (并查集的应用)
给出n个点和m条边,一条一条地删除边,问每次删除以后有多少个联通块. 分析:其实就是并查集的应用,只是前一阵子一直做图论思路一直囿于tarjan了..方法就是,记录每一条边,然后从最后一条边开始不断的 ...
- Spring创建对象的方法
1.利用无参构造器创建对象. 在代码中有一个学生类Student.java package no1; public class Student { public Student(){ System.o ...
- python pip 使用
一.修改 pip 源 Windows 在用户目录下新建 pip\pip.ini 文件,如:C:\Users\Administrator\pip\pip.ini [global] index-url = ...
- koa 实现上传文件
项目目录: 1.上传单个文件 思路: (1)获取上传文件,使用 const file = ctx.request.files.file (2)我们使用 fs.createReadStream 来读取文 ...
- JAVA 基础编程练习题10 【程序 10 自由落体】
10 [程序 10 自由落体] 题目:一球从 100 米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在 第 10 次落地时, 共经过多少米?第 10 次反弹多高? package cska ...
- Spring框架是一种非侵入式的轻量级框架
摘自<Spring框架技术> Spring框架是一种非侵入式的轻量级框架 1.非侵入式的技术体现 允许在应用系统中自由选择和组装Spring框架的各个功能模块,并且不强制要求应用系统的类必 ...
- spark-on-yarn 学习
1. hdfs存文件的时候会把文件切割成block,block分布在不同节点上,目前设置replicate=3,每个block会出现在3个节点上. 2. Spark以RDD概念为中心运行,RDD代表抽 ...
- 使用Visual Studio Code Coverage和nunit上传单元测试覆盖率和单元测试结果到SonarQube上
SonarQube.Scanner.MSBuild.exe begin /k:"OMDCCQuotes" /d:sonar.host.url="http://myip:9 ...
- NFS PersistentVolume
一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports ...