在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发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)});

vue实现登录后跳转到之前的页面的更多相关文章

  1. VUE实现登录然后跳转到原来的页面

    可以在路由里面设置需要登录的界面,判断下没有登录就跳转到登录界面,登录了就不用登录,这里用的是一个存储的 router.beforeEach((to, from, next) => { if(t ...

  2. laravel 登录后跳转原来浏览的页面

    方法 1.修改一下文件/vendor/laravel/framework/src/Illuminate/Foundation/Auth/RedirectsUsers.php 修改内容如下: 没有的加入 ...

  3. 关于WordPress登录后跳转到指定页面

    前面在写模版的时候,有朋友要求网站登录后要跳转的到指定的页面.这个从前还真没遇到过.于是就用万能的搜索(很少百度)找了下,方法基本上就是一个,代码如下: <?php    // Fields f ...

  4. Django 实现登录后跳转

    说明 实现网页登录后跳转应该分为两类:即登录成功后跳转和登录失败再次登录成功后跳转.参考网上内容,基本都只实现了第一类.而没有实现第二类. 实现 为了能让登录失败后再次登录成功后还能实现跳转.我这里采 ...

  5. wordpress注册、登录后跳转到首页

    只想注册后跳转到首页 function new_login_redirect() { return '这里换成首页地址'; } add_action( 'user_register', 'auto_l ...

  6. yii中登录后跳转回登录前请求的页面

    当我们请求一个经过权限控制的请求不通过时,会跳转到一个地方请求权限,请求结束后需要跳转回之前的页面.比如我们请求一个需要登录的action,会被跳转到login页面,我们希望登录成功后跳转到我们之前希 ...

  7. Laravel 登录后跳转回登录前浏览的页面

    一.经过 Auth 中间件检查后跳转至登录页面 也就是没有通过 auth 中间件的认证检查,被 auth 中间件拦截后跳转至登录页面.这种情况下,Laravel 默认会在用户登录成功后自动跳转回登录前 ...

  8. vue-router登录校验后跳转到之前指定页面如何实现

    两个需求:1.用户点击购买需要下单,并跳转到订单页面,但是如果用户没有登录的话,中间有登录验证,会拦截:2.点击购买的时候,登录校验成功了,跳转到订单页面时,订单已创建,去付款即可.3.处理拦截至登录 ...

  9. 一百二十一:CMS系统之注册后跳转到上一个页面

    实现功能,访问测试页面的时候,跳转到注册页面,注册成功后跳转到测试页面 使用参数:若是从其他地址跳转过来时,头部信息中会携带参数referrer,此参数为从从哪个地址跳转到当前地址的,若是直接从浏览器 ...

随机推荐

  1. 【NOIP2015提高组】信息传递

    https://www.luogu.org/problem/show?pid=2661 傻逼图论题,把我写成傻逼了. DFS找环,每个结点第二次访问时更新答案. 但是图会有几个连通块,所以要分开讨论. ...

  2. iscroll使用之页面卡顿问题

    最近在开发项目时,遇到一个问题,使用iscroll实现的页面滚动,测试时发现在chrome浏览器中的模拟移动设备页面不能平滑滚动,有卡顿现象,在android手机端也有同样的问题. 在github上搜 ...

  3. Linux定义变量的脚本

    现有两段基本一样的代码,只是变量进行改变,其他都没有变化,但是执行过程中出现了不一样的结果 代码一: vi back.sh #backup import file,such as /etc/rc.lo ...

  4. Implement Queue using Stacks(用栈实现队列)

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  5. VMWare 虚拟化 Ubuntu 64 (16.04)-- docker 无法链接 pull 镜像 ?(solved)

    背景 根据项目的需要,虚拟化一个Ubuntu OS 来玩 docker,虚拟机选择的是WMWare (VMware-player-14.0.0-6661328); Ubuntu的镜像来自于官网(ubu ...

  6. 如何通过PowerShell获取Office 365 TenantID

    作者:陈希章 发表于2017年5月31日 安装Azure Powershell 模块 Installing the Azure PowerShell Service Management module ...

  7. weka 通过普通文本转化成arff文件

    这个问题来源于我要用weka这个数据挖掘工具,测试时发现我们新建txt文件,输入内容,然后直接改后缀. 这样生成的arff文件不能打开. 究其原因是编码的问题,正确处理方法如下: 新建文本,然后用no ...

  8. Centos7安装配置Xhgui

    XhProf是Facebook出品的一个PHP性能监控工具,只包含基本的界面和图形来分析数据.后来Paul Reinheimer在此基础上开发了Xhgui,提供了更好的界面和功能,其主页在https: ...

  9. Java 硬件同步机制 Swap 指令模拟 + 记录型信号量模拟

    学校实验存档//.. 以经典的生产者消费者问题作为背景. 进程同步方式接口: package method; /** * P表示通过,V表示释放 */ public interface Method ...

  10. Java解析word,获取文档中图片位置

    前言(背景介绍): Apache POI是Apache基金会下一个开源的项目,用来处理office系列的文档,能够创建和解析word.excel.ppt格式的文档. 其中对word文档的处理有两个技术 ...