vue实现登录后页面跳转到之前页面


Posted in Javascript onJanuary 07, 2018

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?

先说一下我们需要用到的几个API:

1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.name获得当前路由的名称。

2.router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录。

由于大家的代码写的都不一样,我就不放我具体的实现代码,简单介绍一下思路:

1.用户点开链接后,跳转到的目标的路由页面,然后触发401拦截器,返回登录页面:

//401拦截
if(status == "401"){
  router.push("/login")   
}

2.我们可以在401拦截的时候将目标链接保存在url中:

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由,并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3.点击登录后使用url上保存的query直接跳转回目标页面

router.push({path:decodeURIComponent(url)});

以上就是我们分享的功能实现代码,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
js tab 选项卡
Apr 26 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
Vue组件开发初探
Feb 14 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
前端路由&webpack基础配置详解
Jun 10 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 #Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 #Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 #Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 #Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 #Javascript
12条写出高质量JS代码的方法
Jan 07 #Javascript
js数组方法reduce经典用法代码分享
Jan 07 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP多文件上传实例
2015/07/09 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP实现的策略模式示例
2019/03/20 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python之列表推导式的用法
2019/11/29 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python用户自定义异常的实现
2020/12/25 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
小学生演讲稿
2014/01/12 职场文书
大学军训感言1500字
2014/03/09 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
个人党性分析材料
2014/12/19 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android