ベアラー トークンを処理するために適切なアプリケーション アーキテクチャを選択する

Question

OAuth 2.0を使用したAPIを使用したい

つまり、サーバーが私の身元を確認できるように、後続のすべてのリクエストにアクセス トークンを含める必要があるアクセス トークンを取得する必要があります。

これをアプリケーションで行う場合、アーキテクチャはどのようなものになるでしょうか?誰か記事を推薦してもらえますか？

現在、リクエストを実行するたびに API から新しいトークンを取得するのは非効率的です。

ベアラー トークンを保存し、有効期限が切れるまで再利用するためのベスト プラクティスはありますか?

アプリケーションで Vue.js を使用したいと考えています。

Answer 1

あなたが言ったように、リクエストごとに新しいトークンをリクエストするのは意味がありません。

ログイン後の最善の方法は、返されたトークンを localStorage に保存することです。これにより、ユーザーがブラウザを更新するかどうかに関係なく、アプリケーションはストレージからベアラーを取得します。

これを完了したら、現在有効な Bearer トークンをすべての axios リクエストに追加する必要があります。 IE:

リーリー

参考までに、これに対処するのに役立つパッケージがたくさんあります。そうでない場合は、頭痛の種になることを覚悟してください。私は個人的にこれをずっと前から使用しています: https://websanova.com/docs/vue-auth/首页