在 react-router-dom 中使用條件渲染進行身份驗證是否安全

Question

在下面的代碼中：

如果從ClientSide發送的用戶身份驗證數據在后端匹配，后端發送帶有用戶id的響應，在前面setIsAuth設置為true然后Layout Component 發送第一個<Switch> case 並且客戶端可以訪問任何受保護的組件。否則， 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

Answer 1

對於顯示的代碼，是的。 因為顯示的代碼沒有敏感信息。 您在所示代碼中所做的是根據用戶是否經過身份驗證呈現兩個不同的界面。

您需要問自己的真正問題是，對於未經身份驗證的用戶，向客戶端發送了哪些信息。 這些組件是否包含敏感信息？ 如果是這樣，有條件地隱藏/顯示它們沒有區別。 信息已經發送給客戶端，所以客戶端有它。

基於身份驗證更改 UI 可以在客戶端進行。 但是顯示/隱藏敏感信息應該始終是服務器端的，因為確定客戶端將涉及在做出該決定之前將該信息發送給客戶端。 （並且會涉及對客戶端做出決定，這本質上是不安全的。）

只要實際的敏感信息需要向服務器提供身份驗證/授權以獲取該數據作為響應，您在客戶端代碼中所做的就是呈現用戶體驗。 即使用戶要修改它，他們也無法在不與服務器交互的情況下獲取任何敏感信息。