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 ...
随机推荐
- checkbox为空
<view:qrytr> <view:qrytd width="15%" heightshow="true">请选择执法范围:</ ...
- 在docker 安装gitlab
一.Centos 7 上安装 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ 1.安装环境 yum install ...
- Kafka 实践
问题描述 配置 Kafka-client 2.x, Spring-Kafka 默认配置 Kafka 三个partition, 使用KafkaListener按group消费. 现象 某天突然发现两个p ...
- 【软件工程】Alpha冲刺 (5/6)
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...
- phpstorm clone 码云项目到本地 Version Control 不显示
最近在用码云作为代码仓库,但是建了仓库,也填加了 SSH,把项目利用 phpstorm VCS --> checkout from version control --> git 克隆到 ...
- Android解决AVD Hardware Buttons 和DPAD无法使用问题
如图所示按键用鼠标点击时无法响应. 解决方案: 以我创建的AVD名为Tablet为例 1.找到用户目录(我的用户目录yummy),然后进入如下目录 mac: ~/yummy/.android/avd/ ...
- QQ输入法中英文标点符号快速切换
QQ输入法中英文标点符号快速切换 全角半角切换 shift+ Space 全角半角切换 双击shift 中英文标点符号快速切换 Ctrl+.
- LC 873. Length of Longest Fibonacci Subsequence
A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...
- 几句简单的python代码完成周公解梦功能
<周公解梦>是靠人的梦来卜吉凶的一本于民间流传的解梦书籍,共有七类梦境的解述.这是非常传统的中国文化体系的一部分,但是如何用代码来获取并搜索周公解梦的数据呢?一般情况下,要通过爬虫获取数据 ...
- Error response from daemon: driver failed programming external connectivity on endpoint httptest (9bb351e8d0738501ae2c57d1bfe3b18aced708d9dc66a63f642c5918cb144340): (iptables failed: iptables --wait
来自守护程序的错误响应:驱动程序未能在终结点httptest上对外部连接进行编程 解决方法: [root@localhost ~]# pkill docker [root@localhost ~]# ...