Проблемы с аутентификацией и Redux / Router

Question

1. Как получить доступ к функции Redux dispatch и маршрутизатору history объект в функции, как показано ниже

export const loginHelper = ({ userInfo }) => {
    dispatch(loginUser(userInfo)); // from where can i get dispatch ??
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    history.push('/foo/search'); // from where can i get history ??
}

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

Answer 1

Прекратить использование localStorage Вот в чем дело: большинство плохих вещей в локальном хранилище не так уж и важны.Вы все еще можете избежать неприятностей с его использованием, но у вас будет немного медленное приложение и небольшое раздражение разработчика.Локальное хранилище не предназначено для использования в качестве механизма безопасного хранения в браузере.Он был спроектирован как хранилище ключей / значений, состоящее только из простых строк, которое разработчики могли использовать для создания чуть более сложных одностраничных приложений.Вот и все.

С чем на самом деле сводится проблема, это межсайтовые скриптовые атаки (XSS).

Если злоумышленник может запустить JavaScript на вашем сайте, он может получить все данные, которые вы 'хранятся в локальном хранилище и отправляются на собственный домен.Это означает, что все, что у вас есть в локальном хранилище (например, данные сеанса пользователя), может быть взломано.

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

Answer 2

Когда вам нужно выполнить какую-либо операцию над своими действиями, вам нужно использовать специальное промежуточное программное обеспечение. Поскольку действия - это простые объекты, на них не может быть побочных эффектов. Для этого нужно использовать что-то вроде redux-thunk или redux-saga. Вот пример действия, перехваченного redux-thunk:

const myAsyncActionCreator = payload =>{
    return (dispatch, getState) =>{
        const endpoint = 'http://api.myproject/data'
        const headers = {headers:{Authorization: 'bearer '+ getState().auth.token}}
        axios.post(endpoint, payload, headers)
            .then(res => dispatch({type: 'type', res.data})).catch(/*...*/)
     }
}

Первый аргумент, предоставленный thunk, - это dispatch, который вызывается при выполнении всех асинхронных действий, а второй - getState - простой способ получить доступ к текущему состоянию вашего приложения