如果用户登录 React 和 Typescript，则在刷新时重定向到仪表板

Posted 2023-02-19

【中文标题】如果用户登录 React 和 Typescript，则在刷新时重定向到仪表板

【英文标题】：Redirect to dashboard on refresh if user is logged in React and Typescript

【发布时间】：2022-01-22 03:45:21

【问题描述】：

我在一个用户登录并且令牌存储在本地存储中的应用程序上工作。如果令牌不在本地存储中，或者如果它在本地存储中并且它是受保护的路由“/dashboard”是有效的，我希望主页成为登录页面。我的代码是：

const App = () => 

  const [authenticated, setAuthenticated] = useState<IState["authenticated"]>(false)   

  useEffect ( () => 
    const token: string | null  = localStorage.getItem('token')   
    if (token)
    
      setAuthenticated(true)
      window.location.assign("/dashboard")
    
  , [authenticated])

  return (
    <div className="App">
      <Router>
        <Routes>
        <Route  path="/" element = <LogIn setAuthenticated=setAuthenticated/> />
        <Route path="/signup" element = <CreateUser /> />
        <Route path="/forgot_password" element =<ForgotPassword/> />
        <Route path="/dashboard" element=<PrivateRoute isAuthenticated=authenticated redirectPath="/"
          component = Dashboard/>/>        
        </Routes>
      </Router>
      
    </div>
  )



export default App

代码不起作用，因为组件不断地重新渲染。如何更改项目中刷新时的主路由在本地存储中而不影响应用程序启动时？谢谢

【问题讨论】：

首先，在您的 useEffect 中，您将重定向到 /dashboard。但是，在这里<Route path="/dashboard" element=<PrivateRoute isAuthenticated=authenticated redirectPath="/" component = Dashboard/>/> ，您再次重定向到/。这会导致重新渲染。

【参考方案1】：

您的无限循环可能是由于您在 useEffect 中设置状态而导致的。你可以在 useEffect 中调用 setState，只要确保你没有一直这样做。

  useEffect ( () => 
    if(!authenticated)
    const token: string | null  = localStorage.getItem('token')   
    if (token)
    
      setAuthenticated(true)
      window.location.assign("/dashboard")
    
    else
        /* You can have something here */
     
    
  , [authenticated])