AxiosにセッションCookieがあるかどうかを確認します

Aug 20 2020

Vue.jsアプリケーションにナビゲーションガードを実装して、ユーザーがログインしているかどうかを確認しています。セッションCookieがあるかどうかをAxiosに確認するのが最善の方法だと思います。このようなもの：

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

もちろん、hasSessionCookie()存在しないことを除いて、私はドキュメントにそのようなものを見ていません。おそらく何らかの拡張によって、方法はありますか？

はい、ログインステータスをVueXストアに保存できることはわかっています。ユーザーが無限の知恵でページを更新してアプリケーションをリセットすると、状態がリセットされるため、これは良い考えではないと思います。私が考えているもう1つの解決策は、アプリがログインしているかどうかを「尋ねる」ことができるバックエンドエンドポイントです。しかし、それもかなり不十分です。

回答

2 TamásPolgár Aug 20 2020 at 06:45

すべてのヒントをありがとう。正しい解決策は次のとおりです。

VueXは、ナビゲーションガードがチェックするログインステータス（単にブールフラグ）を保存します
ユーザーがログインまたはログアウトするときに、フラグを設定します
アプリが起動したら、/checkloginVueインスタンスが作成される前にサーバー上のルートを呼び出します。これは、ユーザーが有効なセッションを持っているかどうかに応じて、200または401のステータスコードを返すだけです。次に、それに応じてVueXフラグを設定します。このようにして、ユーザーはブラウザーを更新できますが、VueXはログインしているかどうかを認識します。
さらに、401エラーを検出するためにAxiosインターセプターを追加しました。存在する場合は、セッションが期限切れになったことを意味します。次に、VueXフラグをに設定しfalse、ユーザーをログインページにリダイレクトします。

Mediumブログに、誰かが気にかけている場合は詳細とスニペットを含む記事を書きました。 https://medium.com/developer-rants/session-management-between-express-and-axios

1 Owl Aug 20 2020 at 03:54

これはサーバー側のCookieであるため、クライアント側のJavaScriptで確認することはできません。セッションが存在するかどうかを確認するには、ExpressサーバーにHTTPリクエストを送信する必要があります。Expressサーバー上に次のような単純なルートを作成します。

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

次に、vueナビゲーションガードを確認します。

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}

Akbarkhan Aug 20 2020 at 03:16

あなたは正しい方向に進んでいますが、axiosはHTTPクライアントであり、Cookieとは関係がなく、Cookieやストレージも気にしません。したがって、Cookieを設定および取得するには、vue-cookieなどのパッケージを使用する必要があります。

generic3892372 Nov 01 2020 at 21:47

TamásPolgár、あなたは私がVueで持っていたのとまったく同じ挑戦を記録しました。予期しないブラウザイベントが発生してストアが失われた場合のログインの処理方法。

Vueストア：

Vueストアは、SPAがそのようなフラグ（ログインしているかどうか）を保存するのに便利な場所ですが、ストアは完全に消去され、Vueインスタンスごとに再確立されます。つまり、新しいブラウザウィンドウ/タブです。更新、またはブラウザの更新をトリガーするその他の予期しないイベント。

したがって、あなたのアプローチは、ステータスをすばやくチェックするための追加のバックエンド呼び出しを説明しています。これは、正当で実行可能なソリューションIMOです。

さらに2つの潜在的な解決策があり、そのうちの2つ目は自分のSPAに実装しました。

他の2つのソリューション

1）バックエンドコードにはまったく触れないでください。ログインが確立されたら、vue-cookiesを使用してクライアントブラウザにCookieを設定させます（これは、バックエンドAPIサーバーが必要とするhttpのみのCookieとは完全に分離されます）。

このCookieは、ブラウザを更新した後も存在しているはずです。ただし、ログインステータスを確認するたびにローカルCookieを確認するようにフロントエンドを変更することをいじりたくなかったため、このアプローチを使用（または試行）しませんでした。

フロントエンドコードは、このCookieを使用して、その人がまだログインしているかどうかを判断できます。

2）別の別のアプローチは、特定のルートのコントローラーに対してのみ認証のために通常のバックエンドAPIチェックを短絡し、他のルートに対しては短絡しないことです。

バックエンドの「短絡」がどのように機能するかを次に示します。

その特定のルートのコントローラーメソッドの場合、最初にリクエストにユーザーが存在するかどうかを確認してから、200を返しますが、ステータスは「false」か、成功応答にも表示されるその他の変数を返します。

これは直感に反しますが、これにより、フロントエンドのAxiosは、標準のエラー応答以外の何かを取得することができます。

注：バックエンドAPIルートのコントローラーメソッドに多くのコードが含まれている場合、このチェックを最初に行うと、呼び出しのコストのかかる部分が回避されるため、これを「短絡」と呼びます。