Как аутентифицировать зарегистрированного пользователя из приложения MERN внутри React-Redux и проверять каждый запрос? - PullRequest
Новая
       21

Как аутентифицировать зарегистрированного пользователя из приложения MERN внутри React-Redux и проверять каждый запрос?

1 голос
/ 09 марта 2020

Я работаю над своим вторым приложением React / Redux (я новичок в Redux), а также первым приложением стека MERN.

В настоящее время у меня проблема с аутентификацией на стороне переднего плана в React / Redux, который выглядит следующим образом:

Я установил промежуточное программное обеспечение защиты в моем Back-End, чтобы проверить, всегда ли пользователь, вошедший в систему, вошел с действительным JWT-токеном или нет, установив токен внутри Браузер готовит ie с включенным флагом HttpOnly {пока нет безопасного флага, но я включу его и на этапе производства}

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

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

это функция входа в Redux Actions: 

export const loginUser = (loginData) => async (dispatch) => {
    try{
        setLoading();

        const res = await axios({
            method: "post",
            url: "/users/login",
            data: {loginData}
        });

        dispatch({
            type: TYPES.LOGIN_SUCCESS,
            payload: {
                status: res.data.status,
                token: res.data.token,
                user: res.data.data.user
            }
        });

        // This below code will set the logged in user after successful login
        getLoggedInUser(res.data.data.user.username);

    }catch(error){
            dispatch({
            type: TYPES.LOGIN_FAIL,
            payload: {
                status: error.response.data.status, 
                message: error.response.data.message
            }
        });
    }
};

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

это моя функция редукционного действия getLoggedInUser: 

export const getLoggedInUser = (userName) => async (dispatch) => {
    try{
        setLoading();
        const res = await axios.get(`/auth/${userName}`, {
            // headers:{
            //     Cookies: `jwt=${token}`
            // }
        });

        dispatch({
            type: TYPES.GET_LOGGED_IN_USER,
            payload: res.data.data.loggedInUser
        });

    }catch(error){
            dispatch({
            type: TYPES.AUTH_ERROR,
            payload: {
                status: error.response.data.status, 
                message: error.response.data.message
            }
        });
    }
};

Любые решения

...