Блог

Главная - Вопросы по программированию - Как сохранить предыдущий маршрут в локальном хранилище с помощью функционального компонента react и маршрутизатора react

Как сохранить предыдущий маршрут в локальном хранилище с помощью функционального компонента react и маршрутизатора react

#reactjs #authentication #axios #react-router #react-share

Вопрос:

Я внедряю публикацию общего доступа в своем веб-приложении react. Я использую библиотеку react-share. И я передаю текущий URL-адрес, используя const shareUrl = window.location.href;

Но пользователь пытается просмотреть сообщение, используя тот URL-адрес, которым я поделился. Его просят войти первым … Это потому, что я написал перехватчик Axios.

  axiosRequest.interceptors.response.use(
      (response) =>
     new Promise((resolve, reject) => {
  resolve(response);
}),
    (error) => {
if (!error.response) {
  return new Promise((resolve, reject) => {
    reject(error);
  });
}

if (error.response.status === 401) {
  sessionStorage.removeItem("token");

  window.location = "/";
} else {
  return new Promise((resolve, reject) => {
    reject(error);
      });
          }
      }
  );

Но когда пользователь успешно вошел в систему, он перенаправляется на страницу каналов, потому что

    dispatch(login(dataToSubmit))
      .then((response) => {
        window.sessionStorage.setItem("token", response.payload.token);
        window.location.replace("/feeds");
        // setData({...Data,email:values.email, password:values.password, 
      otp:response.data.result.otp})
      })

Как я могу направить пользователя по URL-адресу, к которому он пытался получить доступ до входа в систему.. Я исследовал, что могу сохранить предыдущий маршрут в локальном хранилище, но как это реализовать в функциональном компоненте react,?

Комментарии:

1. Ознакомьтесь с демонстрацией рабочего процесса проверки подлинности перенаправления , чтобы получить представление о том, как «сохранить» реферера и перенаправить его обратно на исходный URL-адрес, к которому пользователь пытался получить доступ до аутентификации. Кроме этого, мне интересно, почему вы используете window.location объект для какой-либо навигации по сравнению с использованием инструментов, предоставляемых react-router-dom.

2. const shareUrl = окно. location.href; это дает полный URL-адрес .. В случае react-маршрутизатора он указывает только имя пути.

3. Я использовал history.GoBack(); после входа в систему, но возвращается к предыдущему URL без идентификатора.. как вернуться с параметром?

4. Вы должны использовать серию перенаправлений, каждый раз перенаправляя реферера (т. е. целевой URL-адрес) вместо обратной навигации. Окончательное перенаправление после авторизации происходит на исходный целевой маршрут. Перенаправления необходимы, поэтому, если в любой момент пользователь нажмет кнопку «Назад», он вернется на экран/страницу, к которой он первоначально пытался получить доступ.


Метки: