时间戳

首页 > 解决方案 > 使用 Auth0 在 Gatsby 中体验带有受保护路由的重定向循环

redirect - 使用 Auth0 在 Gatsby 中体验带有受保护路由的重定向循环

问题描述

注意：这个问题不是重复的，我不确定为什么有人认为......

我在使用 Auth0 在 Gatsby 中实现受保护的页面（路由）时遇到问题

目前，当我将浏览器指向 时localhost:8000/user/protectedpage，它会进入登录屏幕，成功登录后，它会返回该路由，并且浏览器似乎卡在两个路由之间的循环加载中。

当我对此进行测试时，页面正在执行无限期重定向循环，同时在页面上显示“重定向...”：

export default withAuthenticationRequired(ProtectedPage, {
  onRedirecting: () => <div>Redirecting...</div>
});

redirectUri在 Auth0Provider 中设置为redirectUri={window.location.origin + '/user'}

auth0 管理页面中允许的回调 URL 设置为，http://localhost:8000/user

如果我将这些路由更改为window.location.originand http://localhost:8000/，那么在成功登录后，它将重定向到该页面并留在那里。

我需要它重定向到它试图去的地方。例如，如果我导航到localhost:8000/user/protectedpage，那么在登录后，它应该重定向到该路由并成功加载该页面，而不是像前面提到的那样陷入循环。

以下是一些代码：

// File structure
src
  > pages
       > user
          > index.js
          > protectedpage
       index.js
  gatsby-browser.js

// gatsby-browser.js
import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import { navigate } from 'gatsby';

const onRedirectCallback = (appState) => {
  navigate(appState?.returnTo || '/', { replace: true });
};

export const wrapRootElement = ({ element }) => {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENTID}
      redirectUri={window.location.origin + '/user'}
      onRedirectCallback={onRedirectCallback}
    >
      {element}
    </Auth0Provider>
  );
};

// protectedpage.js
import React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';

const ProtectedPage = () => {
  return (
    <div>
      Protected Page
    </div>
  );
};

export default withAuthenticationRequired(ProtectedPage);

// auth0 Application URIs

Allowed Callback URLs
http://localhost:8000/user

标签： redirectgatsbyauth0

解决方案

我不确定您的完整实现，但对我来说，它陷入无限循环的事实可能与您通过删除最后访问的页面来替换历史记录有关：

  navigate(appState?.returnTo || '/', { replace: true });

此外，回调正在接收appState否则，它会替换历史记录，但您永远不会在 ( onRedirectCallback={onRedirectCallback}) 处提供它：

// gatsby-browser.js
import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import { navigate } from 'gatsby';

const onRedirectCallback = (appState) => {
  navigate(appState?.returnTo || '/', { replace: true });
};

export const wrapRootElement = ({ element }) => {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENTID}
      redirectUri={window.location.origin + '/user'}
      onRedirectCallback={onRedirectCallback} //<-- here you are not providing an appState
    >
      {element}
    </Auth0Provider>
  );
};

推荐阅读