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,超强推荐expand.js
Dec 23 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Augularjs-起步详解
2016/07/08 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
js时间控件只显示年月
2017/01/08 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
JS实现多功能计算器
2020/10/28 Javascript
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python内置数据类型之列表操作
2018/11/12 Python
python批量解压zip文件的方法
2019/08/20 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python模拟实现斗地主发牌
2020/01/07 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
如何做好总经理助理
2013/11/12 职场文书
小学生获奖感言范文
2014/02/02 职场文书
施工员岗位职责
2014/03/16 职场文书
马智宇结婚主持词
2014/04/01 职场文书
法人授权委托书格式
2014/04/08 职场文书
大学生就业求职信
2014/06/12 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android