ReactJS - перенаправление на страницу входа, если сессия истекла

Question

Я следовал некоторому руководству по созданию аутентификации в React, Node и Redux. Основные функциональные возможности работают, однако, когда я оставляю приложение открытым, а затем возвращаюсь к нему (когда сеанс истек), я получаю следующее сообщение об ошибке:

Unhandled Rejection (TypeError): Cannot read property 'uploadURL' of undefined

Затем я обновляю страницу и получаю сообщение об ошибке:

TypeError: Cannot read property 'push' of undefined

Затем я снова обновляю страницу и наконец перенаправляюсь на домашнюю страницу. Первые 2 ошибки - проблема, я не уверен, как избавиться от них.

Вот так выглядит мой код: ...

class Event extends Component {
    constructor() {
        super();
        ...
    }

    UNSAFE_componentWillMount() {
        // I thought this if-block will redirect the user if the session is expired
        if(!this.props.auth.isAuthenticated) {
            console.log('unauthorized');
            this.props.history.push('/');
        }

        this.uppy2 = new Uppy({ id: 'uppy2', autoProceed: true, debug: true })
                            .use(Tus, { endpoint: 'https://master.tus.io/files/' })
                            .on('complete', (result) => {
                                console.log(`Upload complete! We’ve uploaded these files: ${result.successful[0].uploadURL}`);
                            });
    }
    ...
}
Event.propTypes = {
    registerUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
});

export default connect(mapStateToProps,{ registerUser })(withRouter(Event))

Вот код Redux (я новичок в стеке MERN):

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');
}

Как предотвратить возникновение ошибок по истечении сеанса?

Заранее спасибо!

Answer 1

Я не уверен с этой частью !this.props.auth.isAuthenticated. Вы использовали mapDispatchToProps и connect для редукса? Вы должны сделать это в своем классе событий, чтобы достичь редуктора.

Кроме того, вы можете перед рендерингом jsx-кода объявить переменную, например let redirect = null, и, если !this.props.auth.isAuthenticated правильно, установить для этой переменной перенаправления значение redirect = <Redirect to="/" /> (если вы используете маршрутизацию в браузере!) И используйте эту переменную вот так:

render() {
  return (
    {redirect}
  )
}

Answer 2

ComponentWillMount не будет вызываться, если страница загружена до истечения сеанса. Я подозреваю, что первая ошибка вызвана отсутствием данных, поскольку запрос с просроченным токеном не выполнен. Вам необходимо убедиться, что ошибка 401 или 403 обработана, и очистить состояние Redux, чтобы в этом случае отображалась страница входа.