0

我试图在我的 app.js 中实现一个简单的保护路由中间件。如果用户通过了身份验证，他就不能去“/login”和“/”。我还在 app.js 中做了一个简单的函数，用于检查用户是否未通过身份验证。如果他没有通过身份验证，他将从“/home”重定向到“/login”。不幸的是，如果我这样做，我的网站不会停止刷新。例如：如果未通过身份验证并且我尝试访问“/home”，我将被重定向到“/login”，然后进入刷新循环！:(

应用程序.js

function App() {
  const authenticated = useSelector((state) => state.user.authenticated)
  const dispatch = useDispatch()

useEffect(() => {
   if (!authenticated) {
    window.location.href = '/login'
  } 
  }, [
    // I tried every possible combination
  ])

  

  return (
    <div>
      <Router>
        <Switch>
          <Route exact path='/home' component={HomePage} />
          <ProtectedRoute exact path='/login' component={LoginPage} />
          <ProtectedRoute exact path='/' component={LoginPage} />

         
        </Switch>
      </Router>
    </div>
  )
}

ProtectedToute.js

import React from 'react'
import { useSelector } from 'react-redux'
import { Route, Redirect } from 'react-router-dom'

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const authenticated = useSelector((state) => state.user.authenticated)
  console.log('Route', authenticated)
  return (
    <Route
      {...rest}
      render={(props) => {
        if (authenticated) {
          return <Redirect to='/home' />
         
        } else {
          return (
        
            <Component {...props} />
          )
        }
      }}
    />
  )
}

export default ProtectedRoute
4

0 回答 0