Question

目标：我有用户以管理员身份登录，用户在本地存储中。现在我想检查 if User === "admin" 返回组件 else 重定向到主页。

问题： 每当我尝试访问该组件（以管理员身份登录）时，它都会将我重定向到主应用程序页面。它应该做的是让我进去。

这是代码，我认为问题出在If语句中。

  function App() {
  const cart = useSelector((state) => state.cartReducer.cart);
  const user = JSON.parse(localStorage.getItem("profile"));

  return (
    <Router>
      <Switch>
        <Route path="/updateProduct/:name/:id">

          <Navbar cart={cart} user={user} />
          if(user?.result?.role !== "admin") {<Redirect to="/" />} //here it is misbehaving
          <ProductUpdate />
          <Footer />

        </Route>
      </Switch>
    </Router>
  );
  }
export default App;

注意。我这里有多个组件，那么我该怎么做。

Answer 1

就我而言，您需要在 route 内使用三元运算符或短路。您可以通过安慰输出来使用它。

if(user?.result?.role !== "admin") { 
  console.log('here');
  <Redirect to="/" />};
}

检查控制台中是否显示“此处”。

Reactjs 中的受保护路由

1 个答案: