VUEトークンの無効化プロセスの詳細な説明

ターゲット

トークンの有効期限切れシナリオの処理

トークンは、ユーザーの重要なトークン情報であるため、長期間有効ではありません。通常、有効期限があります（バックエンドによって期限切れになる時間が決定されます）。有効期限を過ぎると、現在のトークンはデータを要求するユーザー識別として使用できなくなります。このとき、追加の有効期限処理を実行する必要があります。

思考分析

ここに画像の説明を挿入

バックエンド: ユーザーから特定のインターフェースへのアクセス要求を受信した場合、現在のトークンが無効かどうかを確認します。トークンが無効な場合は、合意されたステータスコード 10002 をフロントエンドに返します。

フロントエンド: レスポンスインターセプターで、インターフェースの戻り値を分析します。ステータスコードが 10002 の場合は、トークン無効化操作を実行します。

コード着陸

**src/utils/request.js**で、レスポンスインターセプターのエラーを処理するときのカスタムロジックを追加します。

ページジャンプにはルーティングが必要なので、まず

// ルーティングをインポートする import router from '@/router'

コード

// レスポンスインターセプター内 // 1. バックエンドから返されたデータに基づいて操作が成功したかどうかを判断し、失敗した場合はエラーを報告します // 2. 成功した場合は、有効なデータのみを返します service.interceptors.response.use(
  レスポンス => {
    // バックエンドとフロントエンド間の合意: success=true はリクエストが成功したことを示します if (response.data.success) {
      応答データを返す
    } それ以外 {
      // 成功が偽の場合、ビジネスは間違っており、拒否が直接トリガーされます
      // catch ブランチによってキャプチャされます return Promise.reject(new Error(response.data.message))
    }
  },
  非同期エラー => {
    console.log('リクエストエラー', error)
    (エラー応答データコード === 10002) の場合 {
      console.log('トークンの有効期限が切れました')
      store.dispatch('user/logout') を待機します。
      // .vue -- this.$route.fullPath
      // .js -- router.currentRoute.fullPath

      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    console.dir(エラー)
    Promise.reject(error) を返します。
  }
）

上記のソリューションは、バックエンド主導のソリューションです。フロントエンドは、ビジネス処理を行うためにエラーコードを取得するだけで済みます。このソリューションは、最も一般的に使用され、最も安全なソリューションでもあります。