laravel - Vue フロントエンドのシングルページ プロジェクトのためのユーザー認証のアイデア

Question

環境:

• バックエンド: Laravel + Passport

• フロントエンド: Vue 2.0 + Vuex + Vueルーター

質問:

フロントエンドでログインした後に access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage を取得できますか?別のリクエストをバックエンドに送信する必要がありますか?

ユーザーがクリックしてログアウトせずにブラウザまたはウィンドウを直接閉じた場合、次回アクセスしたときに localStorage里的access_token が残ったままになります。この場合、セキュリティはあまり良くありません。

私の access_token は 1 年間有効なので、ログインするたびに再生成されます。 この問題を解決するにはどうすればよいですか?

フロントエンドのユーザー認証を処理する方法についてアイデアをいくつか教えてください...ありがとうございます! ！ ！

Answer 1

たまたまaxiosとrouterを使ってJWT検証を行っていましたが、まだ完成していないので参考までにコードを載せておきます

。

axios パート

リーリー

ルーター部分:

リーリー

Answer 2

終了時にlocalStorage中的access_token。
可以给Vuex写个插件，每次commit mutation时，更新一下access_token更新時間を削除します。
次回ログインするときに、更新時間を決定します。5 分前であれば、ログイン情報は期限切れとみなされます。

access_token を localStorage に置きたくない場合は、Vuex に置くことができます。その場合、毎回再度ログインする必要があります。 access_token放到localStorage中，可以放在Vuex中，每次都需要重新登录。
重新登录时，你可以没必要都重新生成access_token再度ログインするときは、access_token を再生成する必要はありません。

Answer 3

プロジェクトをまとめました。スターへようこそ~
[vue+axios] フロントエンドでログインインターセプトを実装する方法を学ぶプロジェクト

Answer 4

認証情報はログイン時でもログアウト時でもバックグラウンドに依存します。認証情報を覚えていない場合は、リクエストを送信し、API から返された結果に基づいてフロントエンドを操作する必要があります。 sessionStorageを使用することをお勧めします

Answer 5

ルーティングインターセプターを設定し、ログインとログアウトを除くすべてのページをインターセプトし、ローカル変数 user が存在するかどうかを確認し、存在する場合は、最後の検証時間を決定し、1 分を超えているかどうかを再検証します。

リーリー