フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータス コードが 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にインストールすると使用できない問題の解決方法
HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...
方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...
同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...
この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...
1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...
序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...
イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...
この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...
リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...
目次複数の種類のフィルタリングをサポート複数の範囲のクエリを避ける並べ替えを最適化するインデックスの...
この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...
目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...
目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...
CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...