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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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
Protoss魔法科技
2020/03/14 星际争霸
重置版宣传动画
2020/04/09 魔兽争霸
php操作xml
2013/10/27 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
python with statement 进行文件操作指南
2014/08/22 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
Java面向对象面试题
2016/12/26 面试题
高二英语教学反思
2014/01/19 职场文书
杨善洲电影观后感
2015/06/04 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技