在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发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. Linux 两台服务器之间传输文件和文件夹

    今天处理一个项目要迁移的问题,突然发现这么多图片怎么移过去,可能第一时间想到的是先从这台服务器下载下来,然后再上传到另外一台服务器上面去,这个方法确实是可行,但是实在是太费时间了,今天我就教大家怎么快 ...

  2. 为PowerApps和Flow,Power BI开发自定义连接器

    作者:陈希章 发表于 2017年12月20日 前言 我在之前用了几篇文章来介绍新一代微软商业应用平台三剑客(PowerApps,Microsoft Flow,Power BI),相信对于大家会有一种跃 ...

  3. Ubuntu 14.4 Django模型迁移到数据库提示 LookupError: unknown encoding: utf8mb4 解决方法

    由于数据库中需要存储emoji表情,因此需要mysql支持utf8mb4,参考前面的文章升级数据库. 但是由于服务器上面的python-mysqldb连接包版本为1.2.3不支持utf8mb4,因此报 ...

  4. 》》3D轮播

    * { margin: 0; padding: 0; } .slide { position: absolute; top: calc(50% - 150px); left: calc(50% - 3 ...

  5. Natas Wargame Level26 Writeup(PHP对象注入)

    源码: <?php // sry, this is ugly as hell. // cheers kaliman ;) // - morla class Logger{ private $lo ...

  6. IDEA引MAVEN项目jar包依赖导入问题解决

    Intellj 自动载入Mave依赖的功能很好用,但有时候会碰到问题,导致pom文件修改却没有触发自动重新载入的动作,此时需要手动强制更新依赖. 如下: 1手动删除Project Settings里面 ...

  7. IDEA 初始配置教程

    IDEA 初始配置教程 如果你是第一次使用 IDEA,或者对 IDEA 常用配置仍然不熟悉,那么本文就特别适合你. 本文只是根据我自己的使用经验来进行配置,不一定适合所有的情况,但是对你肯定会有帮助. ...

  8. Cannot open url. please check this url is correct

    启动tomcat报错如下 任务管理器 kill 掉所有java进程,在配置中选中After launch选项 要是还是不行,那就无解,只能重启电脑.

  9. iOS开发之JSON转PLIST(把存储json格式的文件转换成plist文件)

    p.p1 { margin: 0.0px 0.0px 0.0px 60.0px; font: 16.0px "PingFang SC"; color: #586e75 } p.p2 ...

  10. webpack+vue-cil 中proxyTable配置接口地址代理

    webpack+vue-cil 中proxyTable配置接口地址代理 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包 ...