Как сделать перенаправление на исходную страницу после авторизации в react.js?

Пользователь

от kyleigh_runte , в категории: JavaScript , 7 месяцев назад

Как сделать перенаправление на исходную страницу после авторизации в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от montana_hand , 6 месяцев назад

@kyleigh_runte 

В React.js вы можете использовать компонент высшего порядка (Higher-Order Component, HOC), который будет проверять, авторизован ли пользователь. Если он не авторизован, компонент перенаправляет пользователя на страницу авторизации. После авторизации, вы можете перенаправить пользователя на исходную страницу.


Вот пример кода, который перенаправляет пользователя на страницу авторизации, если он не авторизован:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

export default PrivateRoute;


В этом примере компонент PrivateRoute проверяет, авторизован ли пользователь (isAuthenticated). Если да, компонент позволяет пользователю просмотреть исходную страницу (<Component {...props} />). Если нет, компонент перенаправляет пользователя на страницу авторизации (<Redirect to='/login' />).


После авторизации, вы можете использовать history.push для перенаправления пользователя на исходную страницу. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react';
import { useHistory } from 'react-router-dom';

const LoginPage = () => {
  const history = useHistory();

  const handleLogin = () => {
    // После успешной авторизации
    history.push('/dashboard');
  }

  return (
    <div>
      <h1>Авторизация</h1>
      <button onClick={handleLogin}>Войти</button>
    </div>
  );
};

export default LoginPage;


В этом примере компонент LoginPage использует useHistory для получения объекта history. После успешной авторизации, компонент вызывает history.push('/dashboard'), чтобы перенаправить пользователя на страницу dashboard.