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代码
Jan 28 Javascript
用户注册常用javascript代码
Aug 29 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
js定时器实现倒计时效果
Nov 05 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
全国中波电台频率表
2020/03/11 无线电
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python fileinput模块使用实例
2015/05/28 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
python实现共轭梯度法
2019/07/03 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python Process多进程实现过程
2019/10/22 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python如何删除文件、目录
2020/06/23 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
pandas 数据类型转换的实现
2020/12/29 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
年终自我鉴定
2013/10/09 职场文书
十八大宣传标语
2014/10/09 职场文书