まず結論からビジネス プロセス: ネットワーク ログからトークンの有効期限が切れていることがわかった場合、ページはログイン ページにリダイレクトされ、ユーザーは再度ログインする必要があります。 コード ロジック: カスタム 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を応援してください。 以下もご興味があるかもしれません:
|
>>: CSS で QR コードスキャンボックスを実装するためのサンプルコード
1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...
序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...
1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...
面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
目次1. Ant Design Vueを統合する2. コンポーネントの使用1. 完全な引用2. コン...
目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...
目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...
1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...
現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...
1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...
目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...
仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...
次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...
削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...