0

フロントエンドにVueを使って開発をしています。
バックエンドはLaravelで、apiで連携しています。

フロントエンド側のログイン管理はどのようにするのが良いのでしょうか?

・画面遷移のたびに、ログインチェック用のapiを呼び出すのでしょうか。
・状態管理ライブラリなどでログイン状態を管理しているのでしょうか。
(その場合、どのようにログインしていないと判定していますか。セッションが切れるまでブラウザを開いていた場合など)

アドバイスを頂けると助かります。よろしくお願いします。

3
  • 質問者さんの言う「ログイン管理」とは何ですか? 想像するに、DB などサーバー側にユーザー情報のストアがあって、ユーザーがログインページで id と password をサーバーに送信すると、サーバーがその id と password が有効かをチェックして、有効であればそのユーザーを認証し、認証トークンとか認証クッキーをユーザーに送信するというような話ではないかと思ってますが。そうだとするとフロント側だけでは何ともならないのは理解されているでしょうか? 理解されているとして「フロントエンド側のログイン管理」とは何を期待してそう言っているのですか?
    – WebSurfer
    Commented 3月7日 1:16
  • コメントありがとうございます。 例えば、ログインしているユーザーだけに見せたいページがあるとき、「ログインしている」というのをどうやって判定するのか、です。 トークンやクッキーでバックエンド側で認証されるのは存じておりますが、 わざわざapiを送る前にログインしている判断できないかと思った次第です。
    – knt15s
    Commented 3月9日 22:52
  • 回答のコメントに書きました。読んでください
    – WebSurfer
    Commented 3月10日 3:27

1 件の回答 1

0

質問のコメントに対する返事がないのでいろいろ不明ですが・・・

バックエンドの Web API にトークンベースの認証が実装されていて、ユーザーがクレデンシャル(id と password 等)をサーバーに送信すると、バックエンドの認証システムが DB のユーザー情報と照合して有効か否かをチェックし、有効であればそのユーザーを認証して認証トークンをユーザーに送信するというような仕組みになっていると想像して、以下の点に回答しておきます

・画面遷移のたびに、ログインチェック用のapiを呼び出すのでしょうか。

クライアント側で認証トークンを受け取ったら、それをブラウザの sessionStorage などに保持しておき、次回の Web API へのアクセスではそれを要求ヘッダに含めて送信するというのが一般的だと思います。下の Fiddler の画像の赤枠部分を見てください。

画像の説明をここに入力

・状態管理ライブラリなどでログイン状態を管理しているのでしょうか。(その場合、どのようにログインしていないと判定していますか。セッションが切れるまでブラウザを開いていた場合など)

上の画像のように、有効な認証トークンが送信されてくれば Web API 側では認証済みユーザーと判断して応答を返してくれます。

認証トークン無しまたはトークンが無効の場合は HTTP 401 Unauthorized 応答が返ってきます。

上記で質問者さんの言う「フロントエンド側のログイン管理」の要件を満たしていますか?

上記だけでは不足で、例えばログインページも実装して、未認証ユーザーがアクセスしてきたらログインページにリダイレクトするとか、ログアウト機能も必要とかであれば、そういう機能が組み込んであるフレームワークを探して、それを使うことをお勧めします。

Visual Studio のテンプレートを使って作成する React + ASP.NET Core Web API の例を紹介します。

初期画面は以下のようになっています。ここは未認証ユーザーもアクセス可です。メニューバーの Fetch Data が Web API から JSON 形式のデータを取得するもので、Web API 側ではユーザー認証が必要になっています。

画像の説明をここに入力

未認証ユーザーが メニューバーの Fetch Data をクリックすると、ログインページにリダイレクトされます。

画像の説明をここに入力

ログインページで有効な id (Email) と password を入力して[Log in]ボタンをクリックして認証を受けると Fetch data ページに結果が表示されます。

画像の説明をここに入力

上に紹介したアプリは OpenID Connect ベースの認証サーバーを使っています。

3
  • 回答ありがとうございます。 未認証の時に、WEB APIを呼び出してしまう前に、 フロント側で未認証を判定できないかと思った次第です。 (無茶苦茶かもしれませんが認証されていなかったら、WEB APIを呼び出せたくない)
    – knt15s
    Commented 3月9日 23:03
  • 「未認証の時に、WEB APIを呼び出してしまう前に、 フロント側で未認証を判定できないかと」ですが、上に書いたように、クライアント側で認証トークンを受け取ったらそれをブラウザの sessionStorage などに保持していれば、その有無はフロント側で分かります。しかし、そのトークンが有効かどうかをサーバ側に問い合わせなければわからなければ(普通分からないはず)、やはりフロント側だけでは何ともなりません。
    – WebSurfer
    Commented 3月10日 3:25
  • ありがとうございます、とても助かりました。
    – knt15s
    Commented 3月11日 13:24

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。