使用 Auth0 时如何在 React 中正确延迟加载组件？答案

【问题标题】：How to properly lazy load components in React when using Auth0?使用 Auth0 时如何在 React 中正确延迟加载组件？
【发布时间】：2022-01-09 03:29:11
【问题描述】：

我已经在我的 react 前端实现了 Auth0，并希望延迟加载组件。我不确定在加载隐藏组件之前验证用户是否登录的正确设置是什么？

我想出了这个简单的例子来说明我认为它会如何工作，但我并不完全确定。

我对安全原则还不是很了解。什么会阻止某人使用 devtools 将 isAuthenticated 的值翻转为 true？如果您认为有一个资源可以很好地学习这一点，我也将非常感激！

我认为它的实施方式示例：

import React, { lazy, Suspense } from "react";
import { useAuth0 } from "@auth0/auth0-react";
import NotAuthenticatedError from "./NotAuthenticatedError";
const MyLazyLoadedComponent = lazy(() => import(...));


export default function App() {

const { isAuthenticated } = useAuth0();

  return (
    <React.Fragment>
      {isAuthenticated && (
        <Suspense fallback={<NotAuthenticatedError />}>
       
         <MyLazyLoadedComponent / >
        

        </Suspense>
      )}
    </React.Fragment>
}

【问题讨论】：

标签： reactjs security authentication auth0

【解决方案1】：

这就是为什么我们应该始终在后端进行用户验证。因此，如果有人设法看到您的 Authenticated Components，如果他尝试执行某些操作，后端仍然会验证用户是否被授权。在 auth0 的情况下，您可以将标头中的访问令牌发送到每个请求的支持，然后使用 auth0 在后端验证令牌。因此，您可以确定只有授权用户在发出请求

【讨论】：

非常感谢您的意见！我也确实在我的后端设置了 Auth0 保护！每个请求都需要一个令牌，该令牌将在服务器端得到验证！我主要是对保护客户端的最佳实践感到好奇！