web-dev-qa-db-ja.com

ReactでのセッションCookieの使用

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をURLに送信します。 response.data.result_status == "success"の場合は、ユーザー情報（名前や電子メールなど）をlocalStorageトークンに設定し、AUTHENTICATE_USERを呼び出して別のlocalStorageアイテムをtrueに設定します。

LocalStorageを使用しているため、リロードしてもデータは保持されます。そして、認証されたlocalStorageがnullに設定されていない限り、私はシステムに留まります。

ただし、ここでは、Cookieのセッションが期限切れにならないように、システムを長く維持する必要があります。現在、私はcookieではなく、ローカルストレージに設定したトークンに基づいてシステムにとどまっています。

バックエンドはJWTを使用せず、Cookieのみを使用しています。 cookieがaxiosとまだセッション中であるかどうかを確認する方法はありますか？

reactjssessionauthenticationcookies
6
lost9123193

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);
});
11
Tom Van Rompaey