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 コードスキャンボックスを実装するためのサンプルコード

推薦する

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

Linuxのシグナルメカニズムについての簡単な説明

目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...

VueはTeleportをベースにModalコンポーネントを実装します

目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...

JavaScript でドラッグ可能なプログレスバーを実装する

この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...

MySQLは遅いSQLを開始し、原因を分析します

ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...

MySQLデータベースパラダイムの詳細な説明

序文:データベースパラダイムについてはよく耳にしていましたが、詳細まで理解したことはありませんでした...

Vue スキャフォールディング プロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...

JavaScript が Jingdong のカルーセル効果を模倣

この記事では、JD.comのカルーセル効果の表示を実現するためのJavaScriptの具体的なコード...

CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]

概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

MySQL の遅いクエリの例

導入スロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメントを記録で...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...