使用Auth0在Gatsby中使用受保护的路由体验重定向环路 [英] Experiencing redirect loop with a protected route in Gatsby using Auth0

问题描述

注意：This question不是副本，我不知道为什么会有人认为...

---

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

目前，当我将浏览器指向localhost:8000/user/protectedpage时，它会进入登录屏幕，成功登录后，它会返回到该路线，浏览器似乎停留在两条路线之间的循环加载上。

当我对此进行测试时，页面正在执行无限期重定向循环，同时在页面上显示"；ReDirect...(&q；)：

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

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

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

如果我将这些路由更改为window.location.origin和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

推荐答案

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

  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>
  );
};

这篇关于使用Auth0在Gatsby中使用受保护的路由体验重定向环路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！