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

作者:laozhang 时间:2024-04-27 16:00:53 

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

来源:https://www.cnblogs.com/caideyipi/p/8227966.html

标签:vue,登录后跳转
0
投稿

猜你喜欢

  • 三分钟教会你用Python+OpenCV批量裁剪xml格式标注的图片

    2023-07-09 14:11:01
  • Vue中利用better-scroll组件实现横向滚动功能

    2024-05-09 15:28:29
  • Linux环境下安装MySQL8.0的完整步骤

    2024-01-22 05:26:47
  • php 异常处理实现代码

    2023-11-14 23:47:12
  • Javascript发送AJAX请求实例代码

    2024-04-29 13:13:34
  • vue使用watch 观察路由变化,重新获取内容

    2024-05-05 09:11:16
  • PHP封装的数据库模型Model类完整示例【基于PDO】

    2023-11-15 21:06:42
  • asp如何让浏览器在https和http之间转化?

    2010-05-13 16:37:00
  • Go语言正则表达式示例

    2023-04-13 19:41:34
  • javascript 得到变量类型的函数

    2024-04-30 08:53:34
  • python处理xml文件操作详解

    2021-11-10 10:31:24
  • Go语言中defer语句的用法

    2023-07-07 11:04:17
  • python人工智能使用RepVgg实现图像分类示例详解

    2021-04-15 21:36:42
  • 在ASP中通过oo4o连接Oracle数据库的例子

    2008-10-12 12:55:00
  • 编程经验点滴 动态SQL的拼接技巧

    2012-11-30 20:03:58
  • 如何在Access数据库中立即得到所插入记录的自动编号?

    2010-06-17 12:45:00
  • Python技巧之四种多线程应用分享

    2021-12-04 12:11:57
  • asp如何统计字符串出现的次数?

    2009-11-25 20:36:00
  • Python检测和防御DOS攻击的最简单方法

    2022-04-12 17:23:19
  • 详解python3 GUI刷屏器(附源码)

    2022-02-02 12:34:15
  • asp之家 网络编程 m.aspxhome.com