有个单页应用的url例如http://cctv.com/!#/car/list,只有在登录的情况下，我才可以去访问这个url，如果不是登录状态，则要跳到登录页面。
http://cctv.com/!#/car/list
以前的话，请求url到后台，后台会判断下当前用户是否登录，但是现在做成单页应用了，也不需要请求到后台了，那么在单页应用的情况下如何来处理用户是否已经登录了的状态呢？
リーリー リーリー リーリー
url の変更をリッスンし、ログアウトしていない場合はログイン ステータスを確認します。 ログインステータスを確認するurl 变化，如果不是login logout 就检查登录状态。检查登录状态
url
检查js变量，没有登录就直接跳登录页
如果js变量已经登录，就判断一下是否需要异步检测 不需要检测就结束(比如上次检测是在60秒内)。
如果需要异步检测，就异步检测是否登录，如果成功 刷新一下lastcheck
lastcheck
ログイン後、バックエンド API がトークンを提供し、フロントエンドがトークンを保存し、アクセスするためにログインする必要がある場合にトークンを渡します。フロントエンド ルーティングによってトークンがあるかどうかが判断され、トークンがない場合はログインします。さらに、フロントエンドには、非同期対話型 API のエラー処理機能があります。たとえば、バックエンド エラー コードは、フロントエンドが以前のトークンをクリアしてログインに切り替えたことを示します。
現在では、フロントエンドが API を介してユーザー名とパスワードをバックエンドに送信するのが通常であり、ログイン状態を維持するかどうかについては、バックエンドが Cookie を設定し、フロントエンドは何もする必要がありません。
localStorangeを通じてログインステータスを保存しますが、セキュリティはまったくありません
ログインステータスはバックエンドによってCookieに保存されます。考える必要はありません。
背景にクッキーを設定するだけです。
バックグラウンドで Cookie を設定した後、フロントエンドがリクエストを行うとヘッダーが自動的に引き継がれます。
その後、ステータス コードに同意します。リクエストが特定のステータス コードを返すと、ログイン ページにジャンプします。
どのような状況であっても、フロントエンドはユーザーが誰であるか、ユーザーがログインしているかどうかを知りません。それで、誰が知っていますか？後部！
そのため、バックエンドが毎回提供するログインステータス情報を提供し、バックエンドにそれを検証させるだけで済みます。
1. Cookie に保存して、リクエストするたびに送信できます。もちろん、これはユーザーには透過的に行うことができ、バックエンドに Cookie を植えさせ、http のみに設定することができます。
2. 単一ページなのでメモリ内のグローバル変数に保存することもできます。そうでない場合はログインされません。
3. トークンを自分でキャッシュし、リクエストを送信するたびに手動で取得することができます。
バックエンドがどのようにサポートしているかによって異なります。トークンとクッキーの両方のメソッドが受け入れられます
loopback+vue+vue-resource、フロントエンドとバックエンドの分離テンプレート、vue ページング機能、認証権限制御、アクセストークンメカニズム、資格情報、CI、Docker
https://github.com/qxl1231/ge...
完全な解決策は私のプロジェクトの例を見てください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
リーリー リーリー リーリー
urlの変更をリッスンし、ログアウトしていない場合はログイン ステータスを確認します。ログインステータスを確認する
url变化，如果不是login logout 就检查登录状态。检查登录状态
🎜 🎜🎜非同期検出が必要な場合は、非同期ログインするかどうかを確認し、成功した場合は检查js变量，没有登录就直接跳登录页
如果js变量已经登录，就判断一下是否需要异步检测 不需要检测就结束(比如上次检测是在60秒内)。
如果需要异步检测，就异步检测是否登录，如果成功 刷新一下
lastchecklastcheck時間を更新します。 🎜🎜 🎜🎜ログインしていないことが検出された場合は、ログインページに直接ジャンプします🎜🎜 🎜ログイン後、バックエンド API がトークンを提供し、フロントエンドがトークンを保存し、アクセスするためにログインする必要がある場合にトークンを渡します。フロントエンド ルーティングによってトークンがあるかどうかが判断され、トークンがない場合はログインします。さらに、フロントエンドには、非同期対話型 API のエラー処理機能があります。たとえば、バックエンド エラー コードは、フロントエンドが以前のトークンをクリアしてログインに切り替えたことを示します。
現在では、フロントエンドが API を介してユーザー名とパスワードをバックエンドに送信するのが通常であり、ログイン状態を維持するかどうかについては、バックエンドが Cookie を設定し、フロントエンドは何もする必要がありません。
localStorangeを通じてログインステータスを保存しますが、セキュリティはまったくありません
ログインステータスはバックエンドによってCookieに保存されます。考える必要はありません。
背景にクッキーを設定するだけです。
バックグラウンドで Cookie を設定した後、フロントエンドがリクエストを行うとヘッダーが自動的に引き継がれます。
その後、ステータス コードに同意します。リクエストが特定のステータス コードを返すと、ログイン ページにジャンプします。
どのような状況であっても、フロントエンドはユーザーが誰であるか、ユーザーがログインしているかどうかを知りません。それで、誰が知っていますか？後部！
そのため、バックエンドが毎回提供するログインステータス情報を提供し、バックエンドにそれを検証させるだけで済みます。
1. Cookie に保存して、リクエストするたびに送信できます。もちろん、これはユーザーには透過的に行うことができ、バックエンドに Cookie を植えさせ、http のみに設定することができます。
2. 単一ページなのでメモリ内のグローバル変数に保存することもできます。そうでない場合はログインされません。
3. トークンを自分でキャッシュし、リクエストを送信するたびに手動で取得することができます。
バックエンドがどのようにサポートしているかによって異なります。トークンとクッキーの両方のメソッドが受け入れられます
loopback+vue+vue-resource、フロントエンドとバックエンドの分離テンプレート、vue ページング機能、認証権限制御、アクセストークンメカニズム、資格情報、CI、Docker
https://github.com/qxl1231/ge...
完全な解決策は私のプロジェクトの例を見てください