vue实现登录后跳转到之前的页面

素颜马尾好姑娘i 2022-05-19 23:35 680阅读 0赞

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

![复制代码][copycode.gif]

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');
          }
        }

![复制代码][copycode.gif]

3.点击登录后使用url上保存的query直接跳转回目标页面

router.push({path:decodeURIComponent(url)});

[copycode.gif]: /images/20220520/ea4db2cf5e5d44c4bd054ecea5a61a5a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，680人围观）

还没有评论，来说两句吧...

相关阅读

相关 UniApp登录后如何实现页面跳转？

在上述代码中，我们通过checkLogin方法检查本地存储中是否存在登录信息，如果存在，则将isLogin设置为true，并且将userInfo设置为本地存储中的用户信息...

矫情吗；*/ 2024年04月29日 11:34/ 0 赞/ 92 阅读

相关 SSM前端登录成功后跳转到查询页面

SSM实现登录和查询功能写在前面整个项目目录运行效果 SSM整合配置文件源码获取 > 需求：前端到后端查询出一个sql显示，用sp

﹏ヽ暗。殇╰゛Y/ 2024年03月26日 12:43/ 0 赞/ 76 阅读

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

在项目开发中客户突然提出这样的一个需求，客户需要在查看某一个页面时，这个页面需要登录才能查看评论或者提交问题，或者…等，需要有权限的才能查看的信息，这时客户会点击登录界面，但是

灰太狼/ 2023年02月16日 10:59/ 0 赞/ 25 阅读

相关 Vue路由实现登录后跳转回原访问页面

官方文档 [导航守卫][Link 1] 解决思路 > 检测到没有权限时，把当前页面的路由及参数带给登陆页，登陆成功后，再跳回传过来的路由地址 router.c

àì夳堔傛蜴生んèń/ 2022年10月28日 03:57/ 0 赞/ 364 阅读

相关让Drupal在登录后自动跳转到登录之前的页面

在模版页内用l()加入如下登录链接： l("登录", "user/login", array('attributes' => array('title' => t('

水深无声/ 2022年07月12日 15:16/ 0 赞/ 214 阅读

相关 Vue实现页面跳转

![70][]![70 1][] 如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: {

àì夳堔傛蜴生んèń/ 2022年05月22日 06:12/ 0 赞/ 376 阅读

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

在开发中我们经常遇到这样的需求，需要用户直接点击一个链接进入到一个页面，用户点击后链接后会触发401拦截返回登录界面，登录后又跳转到链接的页面而不是首页，这种问题该如何去做呢？

素颜马尾好姑娘i/ 2022年05月19日 23:35/ 0 赞/ 681 阅读

相关 vue登录拦截登录后继续跳转指定页面

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

柔情只为你懂/ 2022年02月17日 07:28/ 0 赞/ 325 阅读

相关 vue登录成功后如何跳转url,跳转页面

1. this.$router.push() 解释：这个方法会向history添加一个记录，点击后退会返回到上一个页面使用方法：

灰太狼/ 2021年11月11日 08:10/ 0 赞/ 734 阅读

相关 vue中用户未登录跳转到登录页，登录后返回将要去的页面或者之前的页面

比如现有需求如下： 1：有两种权限类型的页面，有权限的页面需要登录才能访问，没有权限的页面不需要登录就能访问 2：点击登录按钮，跳转到登录页面，登录成功后跳转到主页面

小鱼儿/ 2021年07月25日 22:09/ 0 赞/ 1044 阅读