在React中使用会话Cookie

Question

我对React中的会话cookie有疑问.

目前,这是我对用户进行身份验证的方式:

export function loginUser({ email, password }) {
    return function(dispatch) {
        axios.post(`${API_URL}/users/authenticate`, { email, password }, { withCredentials: true })
            .then((response) => {
                if (response.data.result_status == "success") {
                    localStorage.setItem("token", JSON.stringify(response.data.user))
                        dispatch({ type: AUTHENTICATE_USER }); 
                        browserHistory.push("/home");
                    })
                } 
            })
            .catch(() => {
                dispatch(authError('Incorrect Login Info'));
            });
    }
}

我发送email和发送password到网址.如果是response.data.result_status == "success",那么我将用户信息(如他们的姓名和电子邮件)设置为localStorage令牌,然后我调用AUTHENTICATE_USER另一个localStorage项目为true.

由于我使用的是localStorage,因此重新加载时数据仍然存在.只要经过身份验证的localStorage未设置为null,我就会继续使用该系统.

但是,现在我们希望系统保持在LONG状态,因为cookie的会话未过期.目前,我根据我设置为本地存储的令牌而不是cookie来保留系统.

后端不使用JWT,只是一个cookie.有没有办法让我检查cookie是否仍在与axios会话？

Answer 1

唯一一个知道cookie中的会话仍处于活动状态的是API,因此在这一侧你需要检查来自cookie的会话是否仍处于活动状态.我假设您将401 Unauthenticated在未登录时收到,因此您可以检查每个请求的响应的状态代码,并在会话过期时删除localStorage项目.

我建议你使用Axios的响应拦截器检查状态代码:

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    if (error.status === 401) {
      // DELETE YOUR AUTHENTICATE_USER item from localStorage 
    }
    return Promise.reject(error);
});