在 react-router-dom 中使用条件渲染进行身份验证是否安全答案

【问题标题】：Is it safe to use conditional rendering in react-router-dom for authentication在 react-router-dom 中使用条件渲染进行身份验证是否安全
【发布时间】：2021-04-07 07:20:24
【问题描述】：

在下面的代码中：

如果从ClientSide发送的用户auth data在backend中匹配，backend发送与用户的响应strong>id，前面setIsAuth设置true然后Layout组件先发送<Switch>大小写，客户端可以访问任何受保护的组件。否则，setIsAuth设置false然后Layout组件发送第二个 <Switch> 案例，其中仅包含 <Signup /> 和 <Login /> 路由。它是安全的身份验证方式吗？


  let [isAuth, setIsAuth]=useState( false )

  return (
    <>
      {
       isAuth ? <Switch>
        <Route exact path={"/"} component={ Home } />

        <Route exact path={"/shopping-card"} component={ShoppingCard} />
        <Route exact path={"/order-success"} component={ OrderSuccess } />
        <Route exact path={"/orders"} component={ Orders } />
        <Route exact path={"/products"} component={ Products } />

        <Redirect to={"/user/login"} />
      </Switch> : <Switch>
        <Route exact path={"/user/signup"} component={ Signup } />
        <Route exact path={"/user/login"} component={ Login } />

        <Redirect to={"/user/login"} />
      </Switch>
      }
    </>
  )
}

export default Layout

【问题讨论】：

标签： javascript node.js reactjs react-router-dom

【解决方案1】：

对于显示的代码，是的。因为显示的代码没有敏感信息。您在显示的代码中所做的是根据用户是否经过身份验证呈现两个不同的界面。

您需要问自己的真正问题是为未经身份验证的用户发送给客户端的信息是什么。这些组件是否包含敏感信息？如果是这样，有条件地发出/显示它们没有任何区别。信息已经发给客户端了，所以客户端有。

基于身份验证更改 UI 可以在客户端进行。但是显示/隐藏敏感信息应该始终服务器端，因为确定客户端将涉及在做出该决定之前将该信息发送给客户端。（并且会涉及在客户端上做出该决定，这本质上是不安全的。）

只要实际的敏感信息需要向服务器提供身份验证/授权以获取该数据作为响应，您在客户端代码中所做的一切就是呈现用户体验。即使用户要对其进行修改，如果不与服务器交互，他们也无法获取任何敏感信息。

【讨论】：