Стек MERN: Использование Redux для хранения информации о том, вошел ли пользователь в систему или нет - PullRequest
Новая
       24

Стек MERN: Использование Redux для хранения информации о том, вошел ли пользователь в систему или нет

0 голосов
/ 29 мая 2019

Я новичок в бэкэнд-программировании и создании своего первого проекта полного стека и впервые использую Express / Mongoose / Mongo и Passport.js.

Я создал функциональность "войти в Github" и настроил все с помощью Passport. Теперь я хочу использовать Redux для хранения данных о том, вошел ли пользователь в систему. Если пользователь вошел в систему, я хочу изменить панель навигации, т.е. если пользователь не вошел в систему, одна ссылка говорит «войти», но если пользователь вошел в систему в «войти» ссылка меняется на «профиль».

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

Как мне использовать Redux для хранения данных о том, вошел ли пользователь в систему? Вот что у меня есть:

Действие Redux: 

export function loggedIn() {
    return {
      type: "LOGGED_IN",
      loggedIn: false
    }
};

Редуктор Redux: 

export default function reducer(state = {
  loggedIn: false
}, action) {
  switch(action.type) {
    case "LOGGED_IN": {
      return {
        ...state,
        loggedIn: true
      }
    }
    case "LOGGED_OUT": {
      return {
        ...state,
        loggedIn: false
      }
    }
    default: return state;
  }

}

Я - мой экспресс-маршрут. Я использую следующее промежуточное ПО: 

// Checks if user is not logged in
const authCheck = (req, res, next) => {
    if(!req.user) {
      // If user is not logged in, redirect them to login page
      res.redirect('/auth/login');
    }
    else {
      // If user is logged in call next in router.get

      // Would this be the proper place to dispatch to the Redux store 
      // whether a user is logged in?
      dispatch(loggedIn(true));
      // After updating the Redux store call next()
      next();
    }
};

Как правильно сохранить в состоянии, зарегистрирован ли пользователь в системе или выйти из него, а затем получить доступ к этому состоянию в компоненте React, чтобы я мог использовать троичный оператор, чтобы выбрать, отображать ли «зарегистрировано» или «профиль» в моей навигации бар

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Желательно не смешивать ваши внутренние маршруты с отправкой редуктора.Я бы предложил отправить ответ res.status(200).send({ loggedIn: true }) в ваше промежуточное ПО.

// Checks if user is not logged in
const authCheck = (req, res, next) => {
    if(!req.user) {
      // If user is not logged in, redirect them to login page
      res.redirect('/auth/login');
    }
    else {
      res.status(200).send({ loggedIn: true })
      next();
    }
};

После этого вызов этого промежуточного программного обеспечения может отправлять сообщения об успехе на основе ответа. 

 if (res.status === 200) {
  dispatch(loggedIn(res.loggedIn));
 }
 else {
  dispatch({ type: 'LOGIN_FAILED'})
 }
0 голосов
/ 29 мая 2019

Вы должны просто обработать ваше состояние аутентификации в вашем интерфейсе реакции.Даже если вы выполняете аутентификацию на стороне сервера, лучше просто сохранить состояние аутентификации в вашем интерфейсе React с Redux.В вашем приложении «Реакция»:

Вам также понадобится использовать библиотеку «Реакция-редукс», чтобы соединить реакцию с редуксом

Действия 

export const login_success = () => {
  return {
    type: ACTION_TYPES.LOGIN_SUCCESS
  }
}

export const login_failure = () => {
  return {
    type: ACTION_TYPES.LOGIN_FAILURE
  }
}

Редуктор: 

const initialState = {
  isAuthenticated: false,

}


const AuthReducer = (state= initialState, action) => {
  switch(action.type) {
    case ACTION_TYPES.LOGIN_SUCCESS:
      return {
        ...state,
        isAuthenticated: true
      }
    case ACTION_TYPES.LOGIN_FAILURE:
      return {
        ...state,
        isAuthenticated: false
      }
}

Доступ к состоянию авторизации с помощью props 

 {this.props.isAuthenticated
         ? <h3> user is logged in </h3>
         : <h3> user is not logged in </h3>
       }

function mapStateToProps(state) {
  return {
     isAuthenticated: state.auth_reducer.isAuthenticated
  }
}

Реализация этого в компоненте обратного вызова, который отображается после входа пользователя. 

function mapDispatchToProps(dispatch) {
  return {
    action1: () => dispatch(ACTIONS.LOGIN_SUCCESS),
  }
}

Если вы хотите полностью работающий примеро том, как это сделать, вы можете проверить этот проект, который я построил, это экспресс-приложение с полным стеком и аутентификацией

https://github.com/iqbal125/react-redux-fullstack-blog

Чтобы дать вам немного любви,мне кажется, вы не полностью понимаете Redux, я бы предложил освоить Redux, прежде чем пытаться создать сложное приложение с полным стеком, просто предложение.

Редактировать:

Связь с сервером может осуществляться через прокси-сервер, поэтому в вашем файле package.json вы можете сделать следующее: 

"proxy": http://localhost:5000"

или где угодносервер узла работает.Вы также можете просто отправить ответ сервера на ваш интерфейс React, что угодно, а затем обновить ваш интерфейс React-Redux на основе этого ответа сервера.

Итак, на вашем экспресс-сервере 

router.get('api/login', (req, res) => { 
  if(res.login === true) { 
    res.json(success_login: true)
  }
})

, а затем на вашем реагирующем интерфейсе 

axios.get('/api/login')
  .then(res => this.props.login_success(res.data) )

login_success(res) {
  if(res.success_login === true) {
    type: "SUCCESS_LOGIN"
}

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

...