まず結論からビジネス プロセス: ネットワーク ログからトークンの有効期限が切れていることがわかった場合、ページはログイン ページにリダイレクトされ、ユーザーは再度ログインする必要があります。 コード ロジック: カスタム 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 コードスキャンボックスを実装するためのサンプルコード
序文早速本題に入りましょう。これからお話しするのは次のマインドマップです。まずは印象をつかんでくださ...
MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...
MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...
目次それを覆う栗パラメータの受け渡し値渡し共同配送要約する拡張機能 - 遅延評価私は最近、JavaS...
1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...
<br />前回のCSSに関する記事は、多くの人にあまり理解されませんでした。そのため、...
RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...
この記事では、MySQL の単一テーブル クエリ操作について説明します。ご参考までに、詳細は以下の通...
目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離:一貫性: 2. 分離レベルの基本原理の分...
データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...
<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...
1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...
一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...
Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...
背景開発プロセス中に Docker コンテナ化をサポートするために、通常は Maven を使用してコ...