ReactJS + NodeJS: «TypeError: невозможно прочитать свойство« push »из неопределенного», когда истекает сеанс пользователя

Question

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

Redux / действия / authentication.js

import axios from 'axios';
import { GET_ERRORS, SET_CURRENT_USER } from './types'; // we list here the actions we'll use
import setAuthToken from '../../setAuthToken';
import jwt_decode from 'jwt-decode';

export const registerUser = (user, history) => dispatch => {
    axios.post('/api/users/register', user)
            .then(res => history.push('/login'))
            .catch(err => {
                dispatch({
                    type: GET_ERRORS,
                    payload: err.response.data
                });
            });
}

export const loginUser = (user) => dispatch => {
    axios.post('/api/users/login', user)
        .then(res => {
            //console.log(res.data);
            const { token } = res.data;
            localStorage.setItem('jwtToken', token);
            setAuthToken(token);
            const decoded = jwt_decode(token);
            dispatch(setCurrentUser(decoded));
        })
        .catch(err => {
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            });
        });
}

export const setCurrentUser = decoded => {
    return {
        type: SET_CURRENT_USER,
        payload: decoded
    }
}

export const logoutUser = (history) => dispatch => {
    localStorage.removeItem('jwtToken');
    setAuthToken(false);
    dispatch(setCurrentUser({}));
    history.push('/login');
}

src / App.js (соответствующая часть):

if(localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));

  const currentTime = Date.now() / 1000;
  if(decoded.exp < currentTime) {
    store.dispatch(logoutUser());
    window.location.href = '/login'
  }
}

Страница /login существует. Когда появляется эта ошибка - я могу просто обновить страницу, и приложение перенаправит меня на /. Почему это происходит?

Answer 1

Если история в вашем состоянии, вы можете вернуть ее с помощью getState (). Если его нет в getState, то, как уже упоминалось, вы должны передать это значение в вызов logoutUser.

if(localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));

  const currentTime = Date.now() / 1000;
  if(decoded.exp < currentTime) {
    store.dispatch(logoutUser());
    window.location.href = '/login'
  }
}

export const logoutUser = () => (dispatch, getState) => {
    localStorage.removeItem('jwtToken');
    setAuthToken(false);
    dispatch(setCurrentUser({}));
    getState().user.history.push('/login'); //replace user with wherever your history is within your state
}

Answer 2

Вы должны передать свой исторический объект при регистрации logoutUser в вашем магазине.

if(decoded.exp < currentTime) {
    store.dispatch(logoutUser(history));
    window.location.href = '/login'
}

В противном случае оно будет неопределенным