Как получить имя пользователя (или любые другие данные) вошедшего в систему пользователя с помощью React / Redux

Question

Какой был бы лучший и безопасный способ хранения данных пользователя, вошедшего в систему (в основном имя пользователя или uuid). Итак, я могу использовать его в других моих компонентах? Я думал о нескольких способах сделать это.

1. После входа в систему / регистрации сохраните имя пользователя в локальном хранилище и удалите его по окончании аутентификации. (Очень легко реализовать, но, скорее всего, наименее безопасный)
2. Передайте электронную почту через методы AuthLogin / AuthSignup, но я не могу понять, как передать ее через маршрутизатор. Я также заметил, что это не работает, если браузер обновляется, даже если пользователь все еще вошел в систему.
3. Cookies (пока не знаю, как их использовать, реагируя).

Мой метод authLogin:

export const authLogin = (email, password) => {
    return dispatch =>{
        dispatch(authStart());
        axios.post('http://127.0.0.1:8000/rest-auth/login/',{
            email: email,
            password: password,

        })
        .then(res => {
            const token = res.data.key;
            const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
            localStorage.setItem('token',token);
            localStorage.setItem('expirationDate',expirationDate)
            localStorage.setItem('email', email)#method 1
            console.log("My token",localStorage.getItem('token'))
            dispatch(authSuccess(token,email));#method 2
            dispatch(checkAuthTimeout(3600));
        })
        .catch(err => {
            dispatch(authFail(err))
        })
    }
}

Answer 1

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

Примерно так:

class App extends Component {

    componentDidMount() {
        // User will come from the store. If we do not have a user,
        // but we have a token, then the user is logged in
        if (!this.props.user && sessionStorage.getItem('token')) {
          // a redux dispatch function to authenticate a JWT
          this.props.validateJWT();
        }
    }
}

Что касается прохождения реквизита через маршрутизатор, вам придется использовать renderProp, что может быть немного сложнее. Не могли бы вы поделиться своим кодом для решения проблемы с роутером?