reactjs - 在 React 中使用 session Cookie

Question

我有一个关于 React 中 session 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'));
            });
    }
}

我将电子邮件和密码发送到一个网址。如果 response.data.result_status == "success"，那么我将用户信息(例如他们的姓名和电子邮件)设置为 localStorage token ，然后调用 AUTHENTICATE_USER 来设置另一个 localStorage 项设置为 true。

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

但是，现在我们希望在 cookie session 未过期的情况下留在系统上。目前，我根据设置为本地存储的 token (而不是 cookie)留在系统上。

后端不使用 JWT，只是使用 cookie。有没有办法让我检查 cookie 是否仍在与 axios session 中？

Answer 1

唯一知道来自 cookie 的 session 仍然处于事件状态的是 API，因此在这一侧您需要检查来自 cookie 的 session 是否仍然处于事件状态。我假设您在不再登录时会收到 401 Unauthenticated，因此您可以检查每个请求的响应状态代码，并在 session 过期时删除 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);
});