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

{
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. chattr +i 锁定文件

    reboot machine, 查看DNS服务器配置文件\etc\resolv.conf, 里面的内容变回原来的样子. 原因是resolv.conf文件被系统程序自动维护.为了防止该文件被跟改,可以为 ...

  2. sentinel控制台监控数据持久化【MySQL】

    根据官方wiki文档,sentinel控制台的实时监控数据,默认仅存储 5 分钟以内的数据.如需持久化,需要定制实现相关接口. https://github.com/alibaba/Sentinel/ ...

  3. Css设置字体

    另,考虑到文件编码问题,在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名:Mac OS的一些:Georgia  数字高低起伏Comic Sans MS 好看的英文字体华文细黑:STH ...

  4. SRCNN代码分析

    代码是作者页面上下载的matlab版.香港中文大学汤晓鸥教授.Learning a Deep Convolutional Network for Image Super-Resolution. htt ...

  5. IDEA如何构建mybatis

    任何一个软件都要和数据库关联,软件需要的数据都存储在数据库中. 对于经常使用的数据库相关的代码就出现了很多冗余的代码,持久层框架也随之出现. 目前使用比较流程的持久层框架有hibernate和myba ...

  6. 包含min函数的栈、队列

    题目:定义栈的数据结构,请在该类型中实现一个能够得到栈/队列的最小元素的min函数.在该栈/队列中,调用min.入栈(入队列)及出栈(出队列)函数的时间复杂度都是O(1). 1. 包含min函数的栈 ...

  7. CentOS7或CentOS8 开机自动启用网卡的设置方法

    sudo nano /etc/sysconfig/network-scripts/ifcfg-enp0s3(p0s3是网卡,名字不同环境会有差异,输入时可按tab自动补全.) 将最后一行的 ONBOO ...

  8. 一些常用的java书籍的适看范围

    一些常用的java书籍的适看范围 Java三本经典的书: 1.Java核心技术书籍:适合查阅,遇到某个问题不清楚了,可以来此求证. 2.Effective  Java:对java底层的一些涉及内容,书 ...

  9. python-linux-集群nginx

    一命令基本格式 ----cd ~ 家 ----cd / 根 ---cd ..  上级 ----pwd  当前路径 ----ls -l   -a  -h ----权限rwxrwxrwx  755 二文件 ...

  10. DRF视图-基类

    2个视图基类 REST framework 提供了众多的通用视图基类与扩展类,以简化视图的编写. 为了区分上面请求和响应的代码,我们再次创建一个新的子应用: python manage.py star ...