React 的登录重定向错误是不是有任何修复？

Posted 2023-02-22

【中文标题】React 的登录重定向错误是不是有任何修复？

【英文标题】：Is there any fix to the login redirect bug with React?React 的登录重定向错误是否有任何修复？

【发布时间】：2020-05-24 04:16:08

【问题描述】：

我对此感到困惑，因为我已从他们的文档 (auth0) 中粘贴了整个代码，但它似乎无法正常工作，我不知道为什么，但我不断收到该错误：

TypeError: Cannot read property 'loginWithRedirect' of undefined

在他们的原始包装上

 loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),

并在这一行指向我的 NavMenu.js 文件

<button className="btn btn-success" onClick=() => loginWithRedirect()>Login</button>

这是我的 NavMenu 实现 Auth0 的完整代码

import React,  Component  from 'react';
import  Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink  from 'reactstrap';
import  Link  from 'react-router-dom';
import './NavMenu.css';

import useAuth0 from '../auth0-wrapper';


const NavMenu = () => 
  const isAuthenticated, loginWithRedirect, logout, loading = useAuth0 ();
  return (
    <header>
      <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
        <Container>
          <NavbarBrand tag=Link to="/">Hotel</NavbarBrand>
          isAuthenticated ? (
            <ul className="navbar-nav flex-grow">
            <NavItem>
                <NavLink tag=Link className="text-dark" to="/create">Create</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag=Link className="text-dark" to="/bookings">Bookings</NavLink>
              </NavItem>
              <NavItem>
                <button className="btn btn-danger" onClick=() => logout()>Log out</button>
              </NavItem>
            </ul>
          ) : (
            <ul lassName="navbar-nav flex-grow">
             <NavItem>
                <button className="btn btn-success" onClick=() => loginWithRedirect()>Login</button>
              </NavItem>
            </ul>
          )
        </Container>
      </Navbar>
    </header>
  );



export default NavMenu;

任何帮助将不胜感激。

【问题讨论】：

auth0Client 可能没有导入成功。

@AlexandreLage 我重新安装了auth0Client 3 次，但仍然无法正常工作

你是如何安装它的？请多展示一下你的情况。 @cssnoobie

@AlexandreLage 我正在使用他们的文档和 node js npm install @auth0/auth0-spa-js --save中的命令来安装它@

好的。您确实在使用节点。以及如何在代码顶部导入auth0Client？

【参考方案1】：

我也遇到了这个错误。如果您通过 Chrome 开发工具查看，您可能会看到在从 auth0 加载资源时收到 400 错误。这是错误：400 Error by auth0 Servers

如果是这种情况，您的问题很可能是 auth0 应用程序设置中允许的来源配置错误。这里的任何错误都会导致这个问题。我遇到了同样的问题，解决了它，并且能够为这个答案复制这个问题。

对于开发，我使用的是http://localhost:3000/，但最后的/ 导致资源无法加载。尝试检查您在 auth0 中的设置，并确保您的允许 url 和来源正确。

【讨论】：

这为我解决了！刚刚将应用程序 URI 全部更新为 localhost:3000，它运行良好。谢谢！

【参考方案2】：

即使您完全按照发布的方式使用演示代码，也会出现此错误。 奇怪的是它偶尔会起作用。

我找到了一个“半修复”：

// in App.js  

const  loading, user, isAuthenticated, loginWithRedirect, logout  = useAuth0();

if (loading) 
  return <Loading />;


return (<></>);

这只会将错误转换为永久加载屏幕。也许有帮助。

【讨论】：

实际上，这似乎可行。我添加了该修复程序，并且微调器花了 1-2 分钟的时间，但随后就起作用了。此后，它正常工作。我认为某些东西处于奇怪的状态，必须超时/重置然后才能正常工作。

【参考方案3】：

我最近在使用 Auth-0 构建 React 应用程序时也遇到了这个错误。我还没有实现<PrivateRoute/> 功能，但一直收到错误。如果您从浏览器中的 cookie 中删除 Auth-0 令牌，则此错误将消失，直到实现 <PrivateRoute/> 组件。