在 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，我就会留在系统上。

但是，现在我们希望在 cookie 的会话没有过期的情况下在系统上停留尽可能长的时间。目前，我根据设置为本地存储的令牌而不是 cookie 留在系统上。

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

Answer 1

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

我建议您使用回复interceptor from 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);
});