时间戳

首页 > 解决方案 > 如何重定向到 React 中受保护的 auth0 路径的上一页？

reactjs - 如何重定向到 React 中受保护的 auth0 路径的上一页？

问题描述

我目前正在遵循这个auth0 指南来保护我的路线。如果用户进入我的保护路径，它将正确引导我进入我的 auth0 通用登录页面。但是，如果出于“x”原因，用户决定单击浏览器的后退按钮，它将返回到受保护的路径，这将再次将我重定向到 auth0 通用登录页面！我将创建一个类似于教程的 ProtectedRoute 组件：

<Route
    component={withAuthenticationRequired(component, {
      onRedirecting: () => <Loading />,
    })}
    {...args}
/>

当我点击浏览器的后退按钮时，有没有办法让我在到达受保护的路径之前重定向到上一页？

我的想法是调用'componentWillMount'函数来检查是否通过调用后退按钮到达页面，然后我会调用history.push('/')；

const useWillMount = (fn) => {
    const willMount = useRef(true);

    if (willMount.current && fn && typeof fn === 'function') {
      fn();
    }

    willMount.current = false;
};

useWillMount(() => {
    if (
      String(window.performance.getEntriesByType('navigation')[0].type) ===
      'back_forward'
    ) {
      history.push('/');
    }
});

使用它，它正确地重定向到主页。然而，几毫秒后，它立即让我回到 auth0 通用登录页面。（我相信会发生这种情况，因为即使我调用了 history.push，它也会呈现 ProtectedRoute 组件）。我是在走向正确的道路，还是我完全迷失在这里？

标签： reactjsreact-routerreact-hooksauth0

解决方案

我在 Vue 方面比 React 更有经验，所以我无法评论确切的实现，但这样的方法是否合适：

  1. 每次未登录用户导航到未受保护的页面时，路径都会作为page密钥存储在本地存储中
  2. 用户在未登录时导航到受保护的路线。
  3. 如果不存在，则调用route_guard_accessed的密钥存储在本地存储中，并将它们重定向到登录。
  4. 如果用户被重定向回受保护的页面，并且route_guard_accessed密钥存在于本地存储中，则将他们重定向到存储在path密钥中的页面。
  5. 如果用户被重定向回其旧的、未受保护的页面并且route_guard_accessed密钥存在，则将其从本地存储中删除。

实质上，您记录了未登录用户访问的最后一个未受保护的页面。当他们尝试访问受保护的页面时，您也会记录。如果他们访问受保护的页面并且他们在本地存储中没有route_guard_accessed密钥，他们将被重定向到登录。如果他们这样做了，他们将被重定向回他们最后一个不受保护的页面，并且route_guard_accessed密钥被销毁。

推荐阅读