时间戳

首页 > 解决方案 > 如何根据身份验证在我的 Reactjs 应用程序中添加标头

javascript - 如何根据身份验证在我的 Reactjs 应用程序中添加标头

问题描述

我的整个 ReactJs 应用程序中有四个不同的标头组件。

HeaderA : 未经认证
的用户 HeaderB : 首次登录用户
HeaderC : 非首次用户的认证用户。
HeaderD ：经过身份验证的用户并指向特定的 url。

我已经尝试过了，但似乎没有用。请提出任何更好的方法。

{!authenticated && (<HeaderA></HeaderA>)}
{authenticated &&  ftu && ftu==="true" && (<HeaderB/>)}
{authenticated &&  ftu && ftu==="false" && pathname==="/" && (<HeaderC/>)}
{authenticated &&  ftu && ftu==="false" && pathname!=="/specificRoute" && pathname!=="/" && (<HeaderD/>)}

标签： javascriptreactjsreact-routerfrontend

解决方案

您的条件逻辑阻止了一些要渲染的元素，因为if(ftu && ftu === false)永远不可能是真的，因为第一个 ftu 应该是真实的。

除非这就是您使用字符串而不是布尔值来跟踪的原因。但是检查ftu是没有意义的，因为如果它包含trueor ，它总是真实的false。只有空字符串""是虚假的。

相反，我会编写如下逻辑：

const MyComponent = ({authenticated, ftu, pathname}) => {

   const getHeader = () => {
      if(!authenticated) return <HeaderA />
      if(authenticated && ftu) return <HeaderB />
      if(authenticated && !ftu && pathname==="/specificRoute") return <HeaderD />
      if(authenticated && !ftu) return <HeaderC />
      return null; // Maybe return HeaderC here instead.
   }

   return (
      <div>
         {getHeader()}
         <OtherComponent />
         <ThirdComponent />
      </div>
   )
}

使用函数的原因是确保只返回一个标头。如果您在渲染区域内执行 if 逻辑，如果条件为真，您可能会冒返回两个（或更多）的风险。另外，我将 C 放在 D 之下，因为如果 D 为真，则 C 为真，但当 C 仍然为真时，D 可能为假。

我想 C 将是您的默认标头，因此如果上述条件均不满足，则可能只返回它而不是 null ？

推荐阅读