最新の Web アプリケーションでは、通常、ユーザー認証はトークンを使用して実装されます。トークンには一定の有効期間があり、トークンの有効期限が切れると、ユーザーは認証が必要なリソースにアクセスできなくなります。使用中にトークンの期限切れが原因でユーザーが強制的にログアウトされるのを防ぐために、フロントエンドはユーザーのログイン状態が有効なままであることを保証するために意味を持たずにトークンを更新するメカニズムを実装できます。この記事では、JavaScript を使用してこの機能を実現する方法について説明します。
まず、トークン更新の基本原則を理解する必要があります。ユーザーが正常にログインすると、サーバーはアクセス トークンとリフレッシュ トークンを返します。アクセス トークンはすべてのリクエストの認証に使用され、リフレッシュ トークンはアクセス トークンの有効期限が切れたときに新しいアクセス トークンを取得するために使用されます。したがって、アクセス トークンの有効性を定期的にチェックするスケジュールされたタスクをフロントエンドに実装し、有効期限が切れたときにリフレッシュ トークンを使用して新しいアクセス トークンを取得する必要があります。
以下は、無意味なリフレッシュ トークンのフロントエンド ロジックを実装する方法を示すサンプル JavaScript コードです。
// 定义全局变量用于存储访问令牌和刷新令牌
let accessToken = '';
let refreshToken = '';