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 ...
随机推荐
- leetcode题目234.回文链表(快慢指针+辅助空间-简单)
题目描述: 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否用 O( ...
- input控件的checkbox属性自定义勾选框
思路 首先隐藏input默认勾选框 通过绑定label标签,设置label的样式来设置勾选框 效果 在这里插入图片描述代码 # html中input的checkbox定义,使用for循环创建多个 ...
- Linux设备驱动程序 之 open和release
open方法 open方法提供给驱动程序以初始化的能力,在大部分驱动程序汇总,open应该完成以下工作: 1. 检查特定设备的错误,如设备为准备就绪或者硬件问题: 2. 如果设备是首次打开,则对其进行 ...
- [Java]简单计算下一段Java代码段运行了多少秒
long startTime = System.currentTimeMillis(); ...... long endTime = System.currentTimeMillis(); logge ...
- Go项目的测试代码2(项目运用)
上一篇文章介绍了最基本的测试代码的写法.Go项目的测试代码(基础) 这里简单的共享一下我在项目中使用的方式. 项目结构 我们实际项目中, 结构简单地分了控制层controllers和模块层models ...
- SpringCloud(三)之Feign实现负载均衡的使用
一 点睛 Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个 ...
- Ubuntu下使用AMD APP编写OpenCL程序
对于Ubuntu或其近亲(Lubuntu.Kubuntu.Mint等)编写OpenCL程序也不会太难.由于本例用的是AMD APP SDK,因此需要AMD的GPU以及相关驱动.首先,去AMD官网下载G ...
- 网站title,meta,description如何设置,长度大小多少合适!
转自:http://www.os1010.com/archives/1682 如 何 把 握 html 网 页 中 的 meta 标 签 对于高级的搜索引擎来说,html 的meta 标签并不是什么新 ...
- idea设置包的导入和提示重复代码下波浪线
1.一般idea都不会导入包.即使按了(以下都是已eclipse设置idea的快捷键) alt+enter键也不能导入. 2.关闭重复代码提示(也就是重复代码有波浪线)
- shell脚本常见的结构化函数
if-then if command then command fi if-then-else if command then command else command fi 嵌套if if comm ...