フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータス コードが 401 の場合、トークンの有効期限が切れており、フロントエンドが新しいトークンを要求する必要があることを意味します。 一般的なプロセスは次のとおりです。 1. ユーザーがログインすると、バックエンドはストレージに保存されているaccessTokenとrefreshTokenの2つのトークンを返します。 データをリクエストする際、リクエストヘッダーはaccessTokenを使用してインターフェースを送信します 2. トークンの有効期限が切れると、インターフェースを通じてバックエンドから新しいトークンを取得し、リクエストパラメータはrefreshTokenになります。 3. 新しいaccessTokenとrefreshTokenを取得したら、以前のStorageに保存されているトークンを置き換えます。 4. 同時に、新しいaccessTokenを使用して401を報告したインターフェースを再度要求し、データを取得し、トークンの更新をスムーズに行う必要があります。 5. バックエンドから返された新しいトークンが使用できない場合は、再度ログインしてログインページにジャンプする必要があります (この手順は柔軟に使用できます。個人的にはルーティングプラグインを使用しています: https://ext.dcloud.net.cn/plugin?id=578) uni-app プラグインを使用して実装します。 uni-appプラグインマーケットにアクセスして、パッケージ化されたリクエストネットワークリクエストをダウンロードし、ドキュメントに従って独自のプロジェクトに設定してください。 アドレス: https://ext.dcloud.net.cn/plugin?id=159 設定後、vmeitime-httpフォルダ内のindex.jsファイルを変更します。 次に、vmeitime-httpフォルダ内のinterface.jsファイルを変更して401ステータスを公開します。 これを読んでもまだ理解できない場合は、私のソースコードを見てください。2つのプラグインを使用していることに注意してください。それらを注意深く理解して消化し、自分のプロジェクトで検討してください... './interface' から http をインポートします './config' から設定をインポートします // リクエスト.js 'vue' から Vue をインポートします '@/router' から Router をインポートします //...その他のロジックコード export const execute = (name, data = {}) => { //事前リクエストインターセプターを設定する http.interceptor.request = (config) => { トークン = uni.getStorageSync('accessToken') とします。 config.header['x-access-token']を削除します if (トークン) { config.header['x-access-token'] = トークン } } //リクエスト終了後にインターセプターを設定する http.interceptor.response = async (response) => { 定数ステータスコード = 応答.ステータスコード; ステータスコード === 401 の場合 { 応答 = doRequest(応答) を待機します } ステータスコード === 402 の場合 { uni.removeStorageSync('accessToken'); uni.removeStorageSync('refreshToken'); uni.removeStorageSync('実名'); ジャンプ = uni.getStorageSync('ジャンプ') if (!ジャンプ) { タイムアウトを設定する(() => { uni.showModal({ タイトル: 「ヒント」 内容: 「あなたのアカウントは別の場所からログインされています!」 表示キャンセル: false、 成功: function(res) { (res.confirm)の場合{ ルータ.push({ 名前: 'ログイン', パラメータ: { 'ルーター名': 'ホーム' } }) } }, }) }); uni.setStorageSync('ジャンプ', 'true') } } ステータスコード == 403 の場合 ジャンプ = uni.getStorageSync('ジャンプ') if (!ジャンプ) { タイムアウトを設定する(() => { ルータ.replace({ 名前: 'ログイン', パラメータ: { 'ルーター名': 'ホーム' } }) },500) uni.setStorageSync('ジャンプ', 'true') } } // エラー要求の統一された処理 const code = response.data.code; 定数メッセージ = 応答.データ.メッセージ; レスポンスステータスコード == 200 && コード !== 0 && コード != -1 && コード) { uni.showToast({ タイトル: メッセージ、 アイコン: "なし", 期間: 2000 }); } 応答を返します。 } http.request({を返す 名前: 名前、 ベースURL: config.base、 url: config.interface[名前].path, メソッド: config.interface[name].method ? config.interface[name].method : 'GET', データ型: 'json', データ、 }) } エクスポートデフォルト{ 実行する } // リフレッシュトークンメソッド async function doRequest(response) { const res = 実行を待機します('refresh'、{refreshToken: uni.getStorageSync('refreshToken')}) 定数{ コード、 データ } = res.データ (コード == 0) の場合 { uni.setStorageSync('accessToken', data.accessToken) uni.setStorageSync('refreshToken', data.refreshToken) config = response.config とします。 config.header['x-access-token'] = data.accessToken const resold = 実行を待機(config.name,{ ...config.data }) 返品 再販 } それ以外 { uni.removeStorageSync('accessToken'); uni.removeStorageSync('refreshToken'); uni.showToast({ タイトル: 「ログイン期限が切れました。再度ログインしてください。」 '、 アイコン: "なし", 成功() { ルータ.push({ 名前: 'ログイン', パラメータ: { 'ルーター名': 'ホーム' } }) } }); } } 以上が、uniappの無痛トークンリフレッシュ方法の詳しい説明です。uniappの無痛トークンリフレッシュ方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: VC6.0をWIN10にインストールすると使用できない問題の解決方法
目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...
CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...
フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...
これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...
ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...
目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...
実は、最近はウェブデザインについてよく耳にするようになりました。インターネット業界は今とても発展して...
目次序文1. 新しいVueプロジェクトを作成する2. WebStormの設定1. デバッガポートを設...
凡例コンポーネントは、ECharts でよく使用されるコンポーネントです。シリーズ マーカーの名前を...
目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...
リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...
考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...
最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...
目次1. 環境変数$PATH: 2. 環境変数を変更します。 3. bash_profileの目的要...