React - переменные входа в систему, кэшированные в браузере

Question

Я довольно новичок в React и пытаюсь выучить его, но у меня сильный опыт работы с бэкэндами (java / nodejs / php /...)

Итак, сначала я хотел создать портал авторизации, в основном 3 страницы: - Домашняя страница, которая перенаправляет вас на страницу входа, если вы не авторизованы - Страница авторизации - Страница регистрации

Функции работают (регистрация / вход / выход) Моя проблема на Домашней странице, если я сначала войду с user1, я увижу Hello user1. Если я выйду из системы и войду с помощью user2, я все равно увижу user1.

Кажется, переменная как-то кешируется браузером. Обновление F5 фактически обновляет значение ...: /

Вот что я сделал:

В моем приложении у меня есть этот маршрут:

<Provider store={store}>
      <HashRouter>
        <Switch>
          <Route path="/login" name="Login" component={Login} />
          <Route path="/register" name="Register" component={Register} />
          <PrivateRoute path="/" name="Home" component={Layout} />
        </Switch>
      </HashRouter>
    </Provider>

Поставщик configureStore выполняет:

store.dispatch(requestUserInfo());

И этот requestUserInfo () я создал в следующем классе Я получаю токен, декодирую его с помощью jwt и отображаю некоторую информацию о пользователе:

import jwt_decode from 'jwt-decode'

export const REQUEST_USER = "REQUEST_USER";
export const USER_INFO = "USER_INFO";

export function requestUserInfo() {
if(localStorage.usertoken){
  const decoded = jwt_decode(localStorage.usertoken)
  let usertest = {
    "username": decoded.first_name + " " + decoded.last_name,
    "picture": "assets/img/avatars/test.png",
    "activity": 1
  } 

  return dispatch => {

      dispatch({
        type: USER_INFO,
        payload: usertest
      });

  };
} else {
  return dispatch => {
      dispatch({
        type: USER_INFO,
        payload: {"username": "","picture": "","activity": 0}
      });
  };
}
}

export default function isLogged() {
let status = false

if(localStorage.usertoken){
  try{
    if(jwt_decode(localStorage.usertoken)){
      status = true;
    }
  } catch(e){
    console.log(e)
  }

}

return status
} 

При выходе из системы я удаляю токен, выполняя: localStorage.removeItem ( 'usertoken')

Редактировать: при попытке сделать первый вход в личную вкладку ничего не отображается, переменные пусты. Похоже, мои переменные установлены после рендеринга, может быть?

Edit2: я положил все на github, чтобы было легче отлаживать: https://github.com/senechalm/learning-reactjs

У кого-нибудь есть идеи / предложения по исправлению этой проблемы / ошибки?

Answer 1

Похоже, у вас неверные значения в приставке. Если вы не используете инструменты redux dev - установите его и проверьте свои значения в reducer после выхода из системы и повторного входа в систему.

Answer 2

В репозитории я вижу некоторые проблемы, которые мы можем исправить в 3 этапа:

1. позволяет повторить requestUserInfo(), поэтому мы возвращаем действие, но не вызываем диспетчеризацию:

export function requestUserInfo() {
    if(sessionStorage.usertoken){
      const decoded = jwt_decode(localStorage.usertoken)
       let usertest = {
        "username": decoded.first_name + " " + decoded.last_name,
        "picture": "assets/img/avatars/sunny.png",
        "activity": 12
      } 
      return {
            type: USER_INFO,
            payload: usertest
          };        
    } else {      
      return {
            type: USER_INFO,
            payload: {username: "",picture: "",activity: 0}
          };    
    }
}

2. в Home.js с указанием состояния карты:

const mapStateToProps = (state) => state.user;

function mapDispatchToProps (dispatch) {
  return {
    requestUserInfo: ()=> dispatch(requestUserInfo()) 
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home); 

3. мы должны использовать componentDidMount сейчас как componentWillMount, помеченный как UNSAFE, поэтому удалите его и добавьте:

componentDidMount() {
    console.log("before"+this.props.username)
    this.props.requestUserInfo();
    console.log("after"+this.props.username)
}

Надеюсь, это имеет смысл :)

Answer 3

В вашем коде при создании const для token вы всегда должны получать его из localStorage, а не из ссылки, например,

export function requestUserInfo() {
if(localStorage.usertoken){
  //If you get it from reference, token will be the past user's information and not the 
  //new one.
  const decoded = jwt_decode(localStorage.usertoken)
  let usertest = {
    "username": decoded.first_name + " " + decoded.last_name,
    "picture": "test",
    "activity": 1
  } 
  return dispatch => {
      dispatch({
        type: USER_INFO,
        payload: usertest
      });
  };
} else {
  return dispatch => {
      dispatch({
        type: USER_INFO,
        payload: {"username": "","picture": "","activity": 0}
      });
  };
}

Answer 4

Я полагаю, что проблема возникает, потому что вы не очищаете localStorage.usertoken после выхода из системы.

Запуск removeItem из localStorage при отправке выхода из системы:

localStorage.removeItem("usertoken")