WeChatミニプログラムでトークンの有効期限を処理する方法

WeChatミニプログラムでトークンの有効期限を処理する方法

まず結論から

ビジネス プロセス: ネットワーク ログからトークンの有効期限が切れていることがわかった場合、ページはログイン ページにリダイレクトされ、ユーザーは再度ログインする必要があります。

コード ロジック: カスタム HttpUtil を使用して wx.request API をカプセル化し、期限切れのトークンをグローバルにキャプチャして自動的に処理し、上位レベルのビジネスに送信します。

質問

トークン有効期限切れ現象:

ネットワーク リクエストでは、一定期間後にクライアント トークンが期限切れになり、後続のネットワーク リクエストが失敗し、次のように例外ログがスローされます。

データ: {コード: "99997"、日付: 1634174831325、メッセージ: "トークンの有効期限が切れました"、ステータス: "エラー"}

ミニプログラム wx.request によって提供される API は非常にシンプルです。開発者は、リクエスト応答が成功した後のコールバック関数でのみトークンの有効期限を確認できます。従来のアプローチは次のとおりです。

1. トークンの有効期限を確認する方法を定義します。

関数 checkAuth(resp) {
  if(resp.data.code == '99997') { // サーバーから返されるトークン有効期限コードは 99997 です。コードはバックエンドでカスタマイズできます。
    wx.navigateTo({
      url: '/pages/login/login', // ここでログインページに移動し、ユーザーに再度ログインするよう求めます})
    console.log("再度ログインする必要があります...");
  }
}

2. 各リクエストインターフェースのレスポンスで、checkAuth(res)を呼び出してトークンの有効期限を取得します。

問題コード

関数createMatchImage(データ, fun) {
  //コンソールログ(getApp())
  console.log("トークン = " + getApp().getToken())
  wx.リクエスト({
    メソッド: 'POST'、
    url: conf.baseUrl + 'match/matchImages', 
    データ: データ、
    ヘッダー: {
      'コンテンツタイプ': 'application/json',
      'セッションキー': getApp().getToken()
    },
    成功: 関数 (res) {
      コンソール.log(res)
      conf.checkAuth(res) // トークンの有効期限が切れていないか確認します。期限が切れている場合は、ログイン ページに移動します。
      楽しい(res);
    }
  });
}
 
関数 getMatchImages(id, fun) {
  wx.リクエスト({
   ...
    成功: 関数 (res) {
      conf.checkAuth(res)
   ...
    }
  });
}
 
関数deleteImage(id, fun) {
...
  wx.リクエスト({
    ...
    成功: 関数 (res) {
      conf.checkAuth(res)
      楽しい(res);
      //res を返します。
    }
  });
}

上記のコードでは、各インターフェースに baseUrl、token、checkAuth() の構成などの繰り返しコードが含まれます。ここで重複コードをさらに削除できます。

解決

ネットワーク要求のエントリ ポイントを統一し、HttpUtil クラスを定義します。 wx.request メソッドをカプセル化します。

const get = (url, 成功、失敗) => {
    var _token = getApp().getToken()
    wx.リクエスト({
      メソッド:'GET',
      url: ベースURL + url、
      ヘッダ:{
        「認証」: _token、
        'コンテンツタイプ': 'application/json',
      },
      成功:function(res) {
        checkAuth(res) //ここでトークンの有効期限をブロックし、ログインインターフェースにジャンプします console.log(res)
        成功(res)
      },
      失敗:関数(res){
        console.log("リクエストが失敗しました")
        失敗(res)
      }
    })
}
···
 
モジュール.エクスポート = {
    取得: 取得、
    投稿: 投稿
}

HttpUtil の使用シナリオ:

定数 httpUtil = require("../common/http/HttpUtil")
 
//ロジック層はネットワーク要求を開始するので、URL と成功コールバック関数のみを渡す必要があります。以前よりもずっときれいになりました。
関数 getActivities(成功) {
    httpUtil.get('meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100', 関数(res) {
        成功(res)
    })
}
 
モジュール.エクスポート = {
    アクティビティを取得: アクティビティを取得
}

上記のように、httpUtil を使用すると、トークンの有効期限を処理するプロセスは透過的になり、詳細は内部的にカプセル化されます。同時に、ビジネス側ではトークンの設定、トークンの有効期限処理、baseUrl などの定型コードも保存されます。

Promiseを使用してコールバック関数をカプセル化する

Promise を使用すると、リクエスト インターフェイスを呼び出すときにコールバック関数を渡さなくても済みます。

const get = (パラメータ) => {
    var _token = getApp().getToken()
    新しい Promise を返します ((resolve, reject) => {
      wx.リクエスト({
        メソッド:'GET',
        url: concatUrl(パラメータ),
        ヘッダ:{
          「認証」: _token、
          'コンテンツタイプ': 'application/json',
        },
        成功: (res) => {
          checkAuth(res) //ここでトークンの有効期限をブロックし、ログインインターフェースにジャンプします。resolve(res)
        },
        失敗:(エラー) => {
          console.log("リクエストが失敗しました")
          拒否(エラー)
        }
      })
    })
}

方向:

// サービス層、ネットワークインターフェース関数 getActivities() を定義する {
    HttpUtil.get({ を返す
        URL: 'meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100'
    })
}
    /**
     * アクティビティ リストを読み込みます (アクティビティ アバターを取得するには、まずグループを読み込みます)
     */
    グループとアクティビティをフェッチ: 関数(){
      if(this.data.isLogin) {
        var that = これ
        getGroups() //まずグループ リストのアバターを読み込みます。
        .then((res)=>{
          res.data.code == "10000"の場合{ 
            ...
            return getActivities() // 次に、アクティビティリストを読み込みます}
        })
        .then((res)=>{ //チェーン呼び出し、アクティビティリストデータを処理します。
          (res.data.code == "10000") の場合 {
          ...
          }
        })
        .catch((err) => { //例外を均一にキャッチします。上記のthen内のいずれかのコールバックが例外を送信すると、呼び出しチェーンは直接中断され、ここで処理されます。
          console.log("act と group の取得に失敗しました...")
        })
    }},

要約する

wx.requestAPI のカプセル化プロセスでは、HttpUtil 内で Promise オブジェクトを使用して baseUrl、トークン処理などをカプセル化し、実装の詳細を隠し、外部に統一されたインターフェースを提供し、チェーン呼び出しをサポートします。これは一般的なファサード設計パターンです。欠点は、オープンクローズ原則に違反することです。新しいインターセプト要求インターフェース処理が追加された場合、元のインターフェース実装を変更する必要があります。後で、中間層をインターセプターとして追加して、新しい機能を拡張することができます。

WeChatミニプログラムがトークンの有効期限の問題をどのように処理するかについてのこの記事はこれで終わりです。ミニプログラムのトークンの有効期限の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatミニプログラムクローラートークン自動更新問題について
  • Access_Tokenの統合管理を実現するミニプログラム開発
  • WeChatミニプログラムにログインしてトークンを交換する方法のチュートリアル
  • WeChatアプレットURLとトークン設定の詳細な説明
  • トークン生成と検証を実装するミニプログラム

<<:  HTML マウス CSS コントロール

>>:  CSS で QR コードスキャンボックスを実装するためのサンプルコード

推薦する

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

MySQLの基本操作を詳しく解説(第2部)

序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

Vue3 (パート 2) Ant Design Vue の統合

目次1. Ant Design Vueを統合する2. コンポーネントの使用1. 完全な引用2. コン...

Vue3でカルーセルコンポーネントをカプセル化する方法

目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

MySQL で指定した桁数の乱数を生成する方法と、バッチで乱数を生成する方法

1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...

テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。

現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...

Win10 での MySQL 5.7 の詳細なインストールと設定のチュートリアル

1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...

AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...

VMware のインストールと使用時の問題と解決策

仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...

MySQL 5.7.22 バイナリパッケージのインストールとインストール不要版 Windows 設定方法

次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...