angular.js - フロントエンドとバックエンドが分かれているシングルページ アプリケーションで現在のユーザーのログイン ステータスを確認するにはどうすればよいですか?
给我你的怀抱
给我你的怀抱 2017-05-15 17:09:32
0
9
995

http://cctv.com/!#/car/list のような単一ページのアプリケーション URL があります。ログインしている場合にのみこの URL にアクセスできます。ログインしていない場合は、ログイン ページにジャンプする必要があります。

以前は、バックエンドに URL をリクエストすると、バックエンドは現在のユーザーがログインしているかどうかを判断していました。しかし、現在はシングルページ アプリケーションなので、バックエンドにリクエストする必要はありません。シングルページアプリケーションの場合、ユーザーがログインしているかどうかをどのように処理すればよいでしょうか?

给我你的怀抱
给我你的怀抱

全員に返信(9)
给我你的怀抱

リーリー リーリー リーリー

url の変更をリッスンし、ログアウトしていない場合はログイン ステータスを確認します。
ログインステータスを確認するurl 变化,如果不是login logout 就检查登录状态。
检查登录状态

  1. 检查js变量,没有登录就直接跳登录页

  2. 如果js变量已经登录,就判断一下是否需要异步检测 不需要检测就结束(比如上次检测是在60秒内)。

  3. 如果需要异步检测,就异步检测是否登录,如果成功 刷新一下lastcheck

  4. js変数を確認し、ログインせずにログインページに直接ジャンプします
  5. js 変数がログインしている場合は、非同期検出が必要かどうかを判断し、検出が必要ない場合は終了します (たとえば、最後の検出は 60 秒以内でした)。
🎜 🎜🎜非同期検出が必要な場合は、非同期ログインするかどうかを確認し、成功した場合は lastcheck 時間を更新します。 🎜🎜 🎜🎜ログインしていないことが検出された場合は、ログインページに直接ジャンプします🎜🎜 🎜
いいねを押す +0
伊谢尔伦

ログイン後、バックエンド API がトークンを提供し、フロントエンドがトークンを保存し、アクセスするためにログインする必要がある場合にトークンを渡します。フロントエンド ルーティングによってトークンがあるかどうかが判断され、トークンがない場合はログインします。さらに、フロントエンドには、非同期対話型 API のエラー処理機能があります。たとえば、バックエンド エラー コードは、フロントエンドが以前のトークンをクリアしてログインに切り替えたことを示します。

いいねを押す +0
曾经蜡笔没有小新

現在では、フロントエンドが API を介してユーザー名とパスワードをバックエンドに送信するのが通常であり、ログイン状態を維持するかどうかについては、バックエンドが Cookie を設定し、フロントエンドは何もする必要がありません。

いいねを押す +0
Peter_Zhu

localStorangeを通じてログインステータスを保存しますが、セキュリティはまったくありません

いいねを押す +0
伊谢尔伦

ログインステータスはバックエンドによってCookieに保存されます。考える必要はありません。

いいねを押す +0
Ty80

背景にクッキーを設定するだけです。

バックグラウンドで Cookie を設定した後、フロントエンドがリクエストを行うとヘッダーが自動的に引き継がれます。

その後、ステータス コードに同意します。リクエストが特定のステータス コードを返すと、ログイン ページにジャンプします。

いいねを押す +0
phpcn_u1582

どのような状況であっても、フロントエンドはユーザーが誰であるか、ユーザーがログインしているかどうかを知りません。それで、誰が知っていますか?後部!

そのため、バックエンドが毎回提供するログインステータス情報を提供し、バックエンドにそれを検証させるだけで済みます。

1. Cookie に保存して、リクエストするたびに送信できます。もちろん、これはユーザーには透過的に行うことができ、バックエンドに Cookie を植えさせ、http のみに設定することができます。

2. 単一ページなのでメモリ内のグローバル変数に保存することもできます。そうでない場合はログインされません。

3. トークンを自分でキャッシュし、リクエストを送信するたびに手動で取得することができます。

いいねを押す +0
某草草

バックエンドがどのようにサポートしているかによって異なります。トークンとクッキーの両方のメソッドが受け入れられます

いいねを押す +0
我想大声告诉你

loopback+vue+vue-resource、フロントエンドとバックエンドの分離テンプレート、vue ページング機能、認証権限制御、アクセストークンメカニズム、資格情報、CI、Docker

https://github.com/qxl1231/ge...

完全な解決策は私のプロジェクトの例を見てください

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート