Блог

Эй, ребята, я пытаюсь настроить базовое приложение react с использованием аутентификации cognito и redux .

Вот мое действие

  export function getSession() {
  return async (dispatch, getState) => {
    
    console.log('get session before',  getState().authReducer)
    return getSessionService()
      .then((response) => {
        console.log('good good ', response)
        dispatch({
          type: types.AUTH_SESSION_SUCCESS,
          payload:response
        });
        console.log('get session after',  getState().authReducer)
        console.log('get session response',  response)
      })
      .catch((error) => {
        dispatch({
          type: types.AUTH_SESSION_FAILURE
        });
        console.log('get session error',  error)
        throw error;
      });
  };
}
 

Я называю это в своем app.js файл здесь

 function App() {
  const theme = useSelector((state) => state.themeReducer);
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(getSession())
    
  }, []);  
  ...
  ...
 

Вот мой автор, вот так :

 export default (state = {}, action) => {
  switch (action.type) {
    case types.AUTH_SESSION_SUCCESS:
      {
        console.log('AUTH_SESSION_SUCCESS ', action.payload)
        return {
          ...state,
          user: action.payload.user,
          session:action.payload.session,
          attributes:action.payload.attributes,
          authenticated: true
        };
      }
    case types.AUTH_SESSION_FAILURE:
      {
        console.log('AUTH_SESSION_FAILURE')
        return {
          ...state,
          authenticated: false
        };
      }
    default:
      return state;
  }
};
 

I also have a AuthGuard component to manage protected route like so :

 function AuthGuard({ children }) {

  const auth = useSelector((state) => state.authReducer);
 
  console.log('AUTH AUTH ' , auth);


  if(auth.authenticated){
    console.log('USER LOGGED IN')
    return children;
  }else{
    console.log('USER LOGGED OUT')
    return <Redirect to="/auth/sign-in" />;
  }

}

export default AuthGuard;
 

Проблема здесь в том, что мой AuthGuard не выполняет повторную отправку, поэтому пользователь всегда перенаправляется на /auth/вход, даже если он правильно аутентифицирован

Спасибо за помощь

ОБНОВЛЕНИЕ 1 : Когда я удаляю условие внутри своего компонента AuthGuard, компонент дважды перезаписывается с обновлением хорошего состояния