まず結論からビジネス プロセス: ネットワーク ログからトークンの有効期限が切れていることがわかった場合、ページはログイン ページにリダイレクトされ、ユーザーは再度ログインする必要があります。 コード ロジック: カスタム 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 コードスキャンボックスを実装するためのサンプルコード
目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...
最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...
目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...
目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...
この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...
序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...
ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...
序文:データベースパラダイムについてはよく耳にしていましたが、詳細まで理解したことはありませんでした...
vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...
この記事では、JD.comのカルーセル効果の表示を実現するためのJavaScriptの具体的なコード...
概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...
問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...
プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...
導入スロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメントを記録で...
目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...