Блог

Главная - Вопросы по программированию - Как мне оставить пользователя, вошедшего в систему после обновления страницы?

Как мне оставить пользователя, вошедшего в систему после обновления страницы?

#node.js #reactjs #redux

Вопрос:

Я создаю мини-приложение с системой аутентификации. На серверной части я использую токен NodeJS и JWT, который я вставляю в файл cookie, проверяю его и создаю защищенное промежуточное программное обеспечение. Все это отлично работает для меня, но на интерфейсе (Реагируйте), когда я вхожу в систему, все работает до тех пор, пока я не обновлю страницу, когда я обновлю ее, пользователь будет пустым объектом, и мое состояние будет сброшено. Как сохранить зарегистрированного пользователя даже после обновления страницы?

Это мой редуктор реакции:

 export const userLoginReducer = (state = { user: {} }, action) => {
  switch (action.type) {
    case USER_LOGIN_REQUEST:
      return { loading: true, isAuthenticated: false };
    case USER_LOGIN_SUCCESS:
      return {
        ...state,
        loading: false,
        isAuthenticated: true,
        user: action.payload,
      };
    case USER_LOGIN_FAIL:
      return { loading: false, isAuthenticated: false, error: action.payload };
    case USER_LOGOUT:
      return { loading: false, isAuthenticated: false, user: null };
    default:
      return state;
  }
};

Это мое Ответное действие:

 const { data } = await API.post(
  '/api/v1/users/login',
  { email, password },
  config
);



 dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data,
    });
} catch (error) {
    dispatch({
      type: USER_LOGIN_FAIL,
      payload:
        error.response amp;amp; error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

API-это конфигурация для Axios:

 export default axios.create({
  baseURL: 'http://localhost:8000',
  withCredentials: true,
  credentials: 'include',
});

И это мой экран входа в систему:

 const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const redirect = location.search ? location.search.split('=')[1] : '/';

  const dispatch = useDispatch();

  const userLogin = useSelector(state => state.userLogin);
  const { loading, error, isAuthenticated } = userLogin;

  useEffect(() => {
    if (isAuthenticated) {
      history.push(redirect);
    }

    if (error) {
      console.log(error);
    }
  }, [isAuthenticated, history, redirect, error]);

  const submitHandler = e => {
    e.preventDefault();
    dispatch(login(email, password));
  };

Я новичок в React, поэтому, если кто-нибудь сможет мне помочь, я буду счастлив.

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

1. Я думаю, что для этого вы можете использовать файлы cookie.

2. Храните маркер где-нибудь, например в файле cookie или локальном хранилище.

3. @SinanYaman я храню токен в файле cookie

4. @MarekBartczak хорошо?

Ответ №1:

Одним из доступных вариантов является предоставление дополнительной разрешающей конечной точки.

  1. Пользователь отправляет запрос, например, на /user страницу или /auth сразу после входа на нее
  2. Вы считываете файл cookie на сервере и возвращаете декодированный (из файла cookie) объект пользовательских данных
  3. На основе ответа — вы либо регистрируете пользователя, либо нет (если вы не нашли данных cookie или они были подделаны)

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

1. Я тоже думал об этом, но я бы не знал, как написать этот код.

Ответ №2:

Вам необходимо сохранить данные для входа пользователя на стороне клиента.

В качестве решения вы можете сохранить токен пользователя, имя пользователя, идентификатор … в браузере localStorage и получить его, когда они вам понадобятся.

Но правильное решение состоит в том, чтобы использовать некоторые средства сохранения, например redux-persis , для сохранения всего вашего состояния или его части, чтобы избежать потери информации в хранилище redux после обновления страниц. за кулисами, redux-persist , использует localStorage для сохранения вашего объекта магазина.

Более подробная информация о redux-persis нем и о том, как его реализовать, находится здесь.

Метки: ,