Защищенная страница с использованием response-router-dom не работает

Question

Я пытаюсь реализовать только зарегистрированную на пользовательской панели пользователя страницу.

Приложение. js

<BrowserRouter history={hist}>
  <Route path="/sign-in" exact component={SignIn} />
  <PrivateRoute path="/dashboard">
    <Dashboard />
  </PrivateRoute>
</BrowserRouter>

PrivateRoute. js

export function PrivateRoute({children, ...props}) {
  return (
    <Route {...props} render={( {location} ) =>
      isAuthenticated ? children : <Redirect to="/sign-in" />
    }
    />
  );
}

const isAuthenticated = () => {
  const userToken = JSON.parse(sessionStorage.getItem("user-token"));
  return userToken ? true : false'
}

I Я проверяю sessionStorage на токен пользователя, если он равен нулю, возвращает false или true. Событие, хотя и возвращает «ложь», оно перенаправляет на панель инструментов, а не на страницу входа. В чем моя проблема?

Answer 1

Причина, по которой маршрутизатор перенаправляет на приборную панель даже не прошедшего проверку пользователя, заключается в том, что isAuthenticated является функцией. После этого вам нужно вызвать эту функцию:

export function PrivateRoute({children, ...props}) {
  return (
    <Route {...props} render={( {location} ) =>
      isAuthenticated() ? children : <Redirect to="/sign-in" />
    }
    />
  );
}

const isAuthenticated = () => {
  const userToken = JSON.parse(sessionStorage.getItem("user-token"));
  return userToken ? true : false'
}

Если вы не хотите вызывать функцию каждый раз при изменении маршрута, вы можете реализовать функцию, вызываемую немедленно:

const isAuthenticated = (() => {
  const userToken = JSON.parse(sessionStorage.getItem("user-token"));
  return userToken ? true : false'
})()

export function PrivateRoute({children, ...props}) {
  return (
    <Route {...props} render={( {location} ) =>
      isAuthenticated ? children : <Redirect to="/sign-in" />
    }
    />
  );
}

Answer 2

В PrivateRoute. js сделайте это ..

<Route {...props} render={( {location} ) =>
  isAuthenticated() ? children : <Redirect to="/sign-in" />
}
/>

Причина в том, что вы не вызываете isAuthenticated. Если проблема все еще сохраняется, не стесняйтесь обсуждать.