第一步:添加需要拦截的页面

{
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('已掉线,请重新登录')
}

  拦截全部做完,祝你好运!!!

{
    path: '/control',
    name: 'Control',
    meta: {
      requireAuth: true
    },

vue axios拦截跳转的更多相关文章

  1. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  2. vue axios路由跳转取消所有请求 和 防止重复请求

    直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...

  3. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  4. vue axios 拦截器

    前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...

  5. vue axios拦截器介绍

    关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...

  6. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  7. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

  8. Vue+axios 拦截,超时登录问题

    axios.interceptors.request.use(config => config, error => Promise.reject(error)); axios.interc ...

  9. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

随机推荐

  1. OSX 改变PHP安装路径环境变量

    当使用XAMPP来学习Laravel的时候,用composer安装laravel总是报错,说mcrypt is required ,但是当我在终端里打印 which php 显示的是usr/bin/p ...

  2. NSPredicate谓词的用法

    在IOS开发Cocoa框架中提供了一个功能强大的类NSPredicate,下面来讨论一下它的强大之处在哪...NSPredicate继承自NSObject,它有两个派生的子类• NSCompariso ...

  3. 【零基础】斯坦福四足机器人DIY指引

    可以后空翻的机器狗 近日斯坦福开源了一个四足机器人项目“Stanford Doggo”,“只需”3000美金就可以DIY一个能跳一米高兼后空翻的电子小狗,一段时间研究后我们写了这篇简单的指引帮助大家快 ...

  4. Java web 实验三部分资料上传

    花好月圆系列 貂蝉 黄月英 孙尚香 甄姬 标准包 魏 曹操 司马懿 郭嘉 甄姬 张辽 许褚 夏侯惇 蜀 刘备 关羽 张飞 诸葛亮 黄月英 赵云 马超 吴 孙权 孙尚香 周瑜 大乔 甘宁 吕蒙 群 吕布 ...

  5. asp.net webAPI

    Get: 1.Get参数传递的本质是url字符串拼接:2.url字符串长度受限制:3.Get参数传递在Http请求头部传递,而不支持Request-Body传递:4.Get类型的方法支持参数为基本类型 ...

  6. Maven-导入本地 Jar 包

    一个 Jar 包 <dependency> <groupId>local</groupId> <artifactId>aliyun-java-sdk-c ...

  7. POJ 2109 -- Power of Cryptography

    Power of Cryptography Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 26622   Accepted: ...

  8. dede 友情链接显示不全解决方法

    只需在html页面中调用友情链接的地方修改链接长度即可 titlelen: 链接文字长度(修改此数值即可) row: 友情链接的数量 {dede:flink titlelen="50&quo ...

  9. Linux 查看 MySQL的版本信息

    Linux 查看 MySQL的版本信息 如何查看某台 Linux 主机上的 安装的 MySQL版本信息? 使用如下命令,查看 MySQL的版本信息: mysql -V 或者 mysql --versi ...

  10. Linux命令集锦:ansible命令

    ansible 命令主要用于批量管理,来实现自动化管理.常用批量操作包括:主机分组管理.实时批量执行命令或脚本.实时批量分发文件或目录.定时同步文件等. 一.安装 ansible yum instal ...