在刷新React / Redux Application中的页面后如何保持登录

Question

我正在使用Redux状态保护路由。我正在做的是，当用户登录后，我在isAuthenticated组件中更新redux状态signIn并在AllRoutes组件中接收该状态，然后在我的自定义路由ProtectedHomeRoute中传递了它作为道具。一切工作正常，但问题是当我刷新时，我得到了isAuthenticated值false，这是它的默认值，因此，ProtectedHomeRoute将我重定向到Login页面。

请针对上述用例向我建议处理浏览器刷新的最佳方法。

我试图通过以下方式解决此问题：我执行了一个名为isLoggedIn的新操作，我在此调用API来检查登录状态，如果响应则我在有效负载中传递了真值

然后我在componentDidMount的{​​{1}}生命周期中调用此操作 这样浏览器刷新时AllRoutes就会被调用，并且无法获得以前的状态，但这种方式没有发生。

这是isLoggedIn操作的代码

isLoggedIn

这是auth Reducer代码

export function isLoggedIn() {
  axios.get("http://localhost:8080/api/checkLoginStatus").then(res => {
    let data = res.data; 
    let tid = data.data; // data contain userId
    console.log(tid);
    let isAuthenticate =  false
    if(tid){
      isAuthenticate = true;
    }  
    return dispatch => {
      dispatch({
        type: "isLoggedIn",
        payload: isAuthenticate
      });
    };
  })
}

AllRouts组件代码

    const INITIAL_STATE = {
    isAuthenticate: false
  };

  export default (states = INITIAL_STATE, action) => {
    switch (action.type) {
      case "loggedIn":
        return {
          ...states,
          isAuthenticate: action.payload
        };
      case "logOut":
        return {
          ...states,
          isAuthenticate: action.payload
        };
        case "isLoggedIn":
        return {
          ...states,
          isAuthenticate: action.payload
        };

      default:
        return states;
    }
  };

Answer 1

从您的代码中，我猜测您更像是前端开发人员。您不应该使用userId进行身份验证。您必须在后端使用jwt之类的带有到期时间的东西。使用jwt，您可以为每个登录用户创建一个令牌。将令牌保留在LocalStorage中，并在每个请求中将其作为标头传递，并使您的私有路由需要该令牌。 您可以阅读jwt文档，这应该使您了解它的外观：

验证动作 auth actions

Auth reducer auth reducer

私人路线 Private route