用仪表板构建CMS的反应如何显示隐藏仪表板组件

Question

i构建了一个带有几个组件的React应用程序（简单的CMS），大多数组件可用于访问者，在Main（app.js）组件中。 我使用React路由器显示组件， 我使仪表板组件仅用于管理员，thru example.com/dashboard。 我使用node.js和JWT构建了一个登录系统，我完成了所有逻辑。 但是我不知道显示隐藏仪表板组件的正确方法。 我试图使用但是我无法理解逻辑，请向我展示在React应用程序中展示隐藏仪表板的最佳策略。如果其他逻辑显示/隐藏仪表板，是否可以安全使用。还是不安全地使用它？我的问题：有没有一种反应方式来完成这项工作

exapmle：

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
     |components/
      |Clien/
        |Home.js
        |Home.css
        |Header.js
        |Footer.js
        |Login.js
      |admin/
        |Dashboard.js
        |Dashboard.css
      App.css
      App.js
      index.css
      index.js
      logo.svg

Answer 1

您需要跟踪您的用户是否通过某些全球状态或localStorage登录。然后，您可以做这样的事情：

<Route render={(props) => (
    state.isAuthenticated === true
        ? <Component {...props} />
        : <Redirect to='/login' />
)} />

请记住，恶意使用可能只能打开DevTools并将isAuthenticated更改为true，因此您在仪表板中使用的任何内容也需要通过身份验证来保护。