Vue实现登录后跳转至原访问页面的方案

Vue登录后跳转至原访问页面的方案

在Web开发过程中，常遇到此类场景：用户通过直接点击链接访问特定页面，但该操作会触发系统的401未授权拦截，导致用户被重定向至登录界面。理想的情况是，用户完成身份验证后，系统应自动将其引导回最初尝试访问的目标页面，而非默认的首屏首页。针对这一需求，具体的解决策略如下。

核心API说明

实现该功能主要依赖Vue Router提供的以下核心API：

1. router.currentRoute：该属性返回当前路由信息的对象。开发者可通过其fullPath属性获取解析后的完整URL，该路径包含查询参数及哈希值；若目标路由配置了名称（name），则可通过currentRoute.name属性直接获取路由名称。

2. router.replace：此方法的功能与router.push类似，均用于导航，但区别在于它不会向浏览器历史栈中添加新记录，而是替换当前的历史记录。

实现逻辑概述

鉴于不同项目的代码实现存在差异，此处不展示具体业务代码，仅阐述核心逻辑思路：

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参数中提取保存的目标路径，并直接跳转至该目标页面。

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

上述即为实现登录后跳转回原页面的核心思路，感谢对本站的支持。