当用户未登录用户尝试访问私有路由时，向所有私有路由显示警报

Posted 2023-03-23

【中文标题】当用户未登录用户尝试访问私有路由时，向所有私有路由显示警报

【英文标题】：displaying alert to all the private route when user non logged in user tries to visit private route

【发布时间】：2020-06-01 08:28:34

【问题描述】：

我的 react js 应用程序中有两条路由 private 和 public route。我想知道当未登录用户尝试访问私有路由时，是否可以向所有私有路由显示警报。我不想在每个私有组件内部做。 我自己尝试过，但当用户未登录时，它开始在每个页面上发出警报。

这是我的私人路线代码。

const PrivateRoute = ( component: Component, ...rest ) => 
  // console.log("restprivate", rest);
  const  changeBottomNavBar, tansformToButton, changeHeaderForOrder  = rest;
  //console.log("loggedin", Store.getState().user.data.loggedIn);
  return (
    <div style= width: "100wv" >
      <HeaderContainer
        privateHeader=true
        changeHeaderForOrder=changeHeaderForOrder
      />
      <TermsOfUse />
      <PrivacyPolicy />
      <VendorTerms />
      <Route
        ...rest
        render=(props) =>
          Store.getState().user.data.loggedIn ? (
            <Component ...props />
          ) : (
            <Component ...props />
          )
        
      />
      <Mobile>
        changeBottomNavBar ? (
          <BottomNavBarContainer />
        ) : (
          <BottomNavBar tansformToButton=tansformToButton />
        )
      </Mobile>
      <Desktop>
        <Footer />
      </Desktop>
    </div>
  );
;

【参考方案1】：

重构 Route 组件 render 回调以检查 loggedIn 值并在返回组件以呈现之前触发警报。

<Route
  ...rest
  render=(props) => 
    const  loggedIn  = Store.getState().user.data;
    !loggedIn && alert('This is a private Route');
    return loggedIn ? (
      <Component ...props />
    ) : (
      <Component ...props /> // <-- Why return same Component?
    )
  
/>