uniappの無痛トークンリフレッシュ方法の詳細な説明

uniappの無痛トークンリフレッシュ方法の詳細な説明

フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータス コードが 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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • uniapp 要素ノードスタイルの動的変更の詳細な説明
  • uniappとvueの違いの詳細な説明
  • uniappのグローバル変数実装の詳細な説明
  • uni-appのスタイルの詳細な説明

<<:  VC6.0をWIN10にインストールすると使用できない問題の解決方法

>>:  MySQL スローログ実践のまとめ

推薦する

HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...

HTML フォームを送信するいくつかの方法_PowerNode Java Academy

方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...

MySQLでストアドプロシージャをデバッグする最も簡単な方法

同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...

js でパズルゲームを実装する

この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...

Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成

1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...

Linuxファイル削除後にスペースが解放されない問題の詳しい説明

序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

Dockerはrabbitmqのサンプルコードをインストールして実行します

イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...

Docker+Jenkinsを使用して自動的にビルドおよびデプロイする

この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...

WangEditor リッチ テキスト コンポーネントを Angular でカプセル化する方法

リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...

MySQLでテーブルインデックスを構築する方法

目次複数の種類のフィルタリングをサポート複数の範囲のクエリを避ける並べ替えを最適化するインデックスの...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

Reactでレシピシステムを実装する方法を解説した記事

目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...

CSS3のtransform属性で実装される4つの機能

CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...