如何实现登录后重定向至用户原访问页面？技术咨询

核心思路 #

解决问题的关键在于记录用户原本想要访问的页面路径，登录成功后根据是否存在该记录，决定最终跳转的目标页面。

具体实现步骤 #

1. 拦截未登录请求，保存目标路径

当用户未登录却访问需权限验证的页面时，在路由拦截逻辑（比如React Router的自定义权限路由组件）中，把当前页面的完整路径（路径+查询参数）存储到localStorage或者路由的state里：

// 自定义权限路由组件示例
function ProtectedRoute({ children }) {
  const isLoggedIn = checkLoginStatus(); // 替换成你判断登录状态的方法
  const location = useLocation();

  if (!isLoggedIn) {
    // 存储用户原本要访问的路径
    localStorage.setItem('redirectTarget', location.pathname + location.search);
    // 跳转到登录页
    return <Navigate to="/login" />;
  }

  return children;
}

2. 修改登录成功后的跳转逻辑

在你现有的登录成功回调enter函数里，先读取存储的目标路径，存在则跳转至该路径并清空存储值；不存在则默认跳首页：

const loginMutation = useMutation(loginQueries.login.fn, {
    onSuccess: enter,
    onError: showLoginError,
})

function enter() {
    queryClient.invalidateQueries()
    // 读取存储的重定向路径
    const targetPath = localStorage.getItem('redirectTarget');
    if (targetPath) {
        // 跳转到用户原本想访问的页面
        history.push(targetPath);
        // 清空存储的路径，避免后续登录重复跳转
        localStorage.removeItem('redirectTarget');
    } else {
        // 常规登录场景跳首页
        history.push('/');
    }
}

3. 适配直接访问登录页的场景

如果用户是直接打开登录页（而非从受限页面跳转过来），redirectTarget会是空值，此时就会走默认的首页跳转逻辑，完美匹配场景1。

注意事项 #

• 用localStorage存储路径的优势是页面刷新后不会丢失；若使用路由state存储，刷新后数据会清空，可根据你的实际需求选择。
• 若登录失败或用户主动取消登录，建议清空redirectTarget，避免残留旧路径影响后续操作。

内容的提问来源于stack exchange，提问作者Foris