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

@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.

@kyleigh_runte 

Дополнительно, для работы с перенаправлением после авторизации, можно также использовать React Router, который облегчает управление маршрутами и перенаправлениями в вашем приложении React. Ниже приведен пример того, как вы можете использовать React Router для перенаправления пользователя после авторизации на исходную страницу:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

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

  const handleLogin = () => {
    // Ваш логин-механизм, который устанавливает isAuthenticated в true
    setIsAuthenticated(true);
  }

  return (
    <Router>
      <div>
        <Route path="/login" render={() => (
          <div>
            <h1>Авторизация</h1>
            <button onClick={handleLogin}>Войти</button>
          </div>
        )} />
        <PrivateRoute path="/dashboard" component={() => <h2>Панель управления</h2>} />
      </div>
    </Router>
  );
};

export default App;

В этом примере, после успешной авторизации на странице '/login', вы можете использовать props.location.state.from в компоненте авторизации для перенаправления пользователя на исходную страницу. В обработчике handleLogin после успешной авторизации вы можете использовать history.push(props.location.state.from.pathname) для перенаправления пользователя на исходную страницу, которая была запрошена до авторизации.

Будьте уверены, что правила перенаправлений и авторизации соответствуют вашей конкретной ситуации и требованиям безопасности.