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 相关文章推荐
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
javascript实现获取字符串hash值
May 10 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
JAVA面试题 static关键字详解
Jul 16 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
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python进阶教程之循环对象
2014/08/30 Python
python中字符串前面加r的作用
2015/06/04 Python
Flask之flask-script模块使用
2018/07/26 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python接口开发实现步骤详解
2020/04/26 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
医学专业应届生的自我评价
2014/02/28 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
退税申请报告怎么写
2015/05/18 职场文书
分享几种python 变量合并方法
2022/03/20 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技