为什么刷新页面后用户注销？ React / Redux应用

Question

与标题中一样-当我在React / Redux应用程序中重新加载页面时，用户正在注销。我将令牌存储在localStorage中，但是它不起作用，因此可能有任何错误。用户登录时应该存储令牌。注销工作正常。这是我的代码：

auth.js（还原程序目录-Redux）：

import { LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, REGISTER_SUCCESS, REGISTER_FAIL } from '../actions/types';

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  isRegistered: false
}

export default function(state = initialState, action) {
  switch(action.type) {
    case REGISTER_SUCCESS:
      return {
        ...state,
        ...action.payload,
        token: null,
        isAuthenticated: false,
        isLoading: false,
        isRegistered: true
      }
    case LOGIN_SUCCESS:
      localStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
        isAuthenticated: true,
        isLoading: false,
      }
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case REGISTER_FAIL:
      localStorage.removeItem('token');
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        isLoading: false
      }
    default:
      return state;
  }
}

用户登录时来自服务器的响应：

Answer 1

我真的不知道您如何检查是否有登录用户，但是刷新页面时，商店不会自动填充。因此，如果您根据isAuthenticated检查身份验证状态，也许应该添加类似的内容：

const initialState = {
   token: localStorage.getItem('token'),
   isAuthenticated: localStorage.getItem('token') ? true : false, // or just !!localStorage.getItem('token')
   isLoading: false,
   isRegistered: false
}

或使用某些功能检查localStorage并相应地更新存储。

Answer 2

在这里只是猜测，但看来您的initialState.isAuthenticated始终是null，您需要根据token中的localStorage进行验证

Answer 3

Martial Anouman的方法是正确的，但从长远来看，我认为您也可以将redux存储保存到localStorage ，因此，如果用户刷新页面，则redux状态将保存到刷新后，localStorage和初始状态值将不会消失。我使用redux-persist库，可以使用take a look at their github进行实施