Web プロジェクト開発における 2 つのトークン理由とサンプル コードの分析

Web プロジェクト開発における 2 つのトークン理由とサンプル コードの分析

ここに画像の説明を挿入

質問:

プロジェクトには 2 つのトークンがあり、1 つは有効期間が 2 時間 (ショート トークンと呼ばれる)、もう 1 つは有効期間が 14 日間 (ロング トークンと呼ばれる) です。
なぜ 2 つのトークンを使用するのですか?

答え:

1. セキュリティ上の考慮とトークン漏洩防止のため、サーバー リソース内のすべてのリクエストでは短いトークンのみを使用でき、短いトークンの有効期間は 2 時間のみです。

  • この方法では、トークン漏洩防止の問題を完全に解決することはできませんが、トークン漏洩防止のセキュリティをある程度向上させることはできます。
  • 長いトークンの唯一の機能は、短いトークンの有効期限が切れたときに、それを使用して新しい短いトークンを要求することです。

このインターフェースでのみ、長いトークンを使用してリクエストを送信できます。

2. ユーザーエクスペリエンスを向上させるために、操作中のページからユーザーに直接終了を要求しないでください。

'vue' から Vue をインポートします
'axios' から axios をインポートします
'vue-axios' から VueAxios をインポートします
'./token' から { getToken, setToken } をインポートします。
'../router/index.js' からルーターをインポートします。
'vant' から { Toast } をインポートします
Vue.use(VueAxios、axios) を使用します
定数インスタンス = axios.create({
  baseURL: 'ベースURL',
  タイムアウト: 100000
})
// リクエストインターセプターを追加するinstance.interceptors.request.use(
  関数(設定){
    // トークンを均一に追加する
    getToken() && (config.headers['Authorization'] = `Bearer ${getToken().token}`)
    設定を返す
  },
  関数(エラー){
    Promise.reject(error) を返します。
  }
)
//レスポンスインターセプターを追加/**
 * 1. 401 の場合は無視* 2. トークンがある場合はログイン ページにジャンプ* 3. try-catch を使用して refresh_token を使用してトークンを取得し、成功した場合は refresh_token が無効な場合はログイン ページにジャンプ* 4. 取得したトークンを保存して更新し、ユーザーの希望する操作を続行*/
インスタンスインターセプターレスポンスの使用(
  関数(応答){
    応答を返す
  },
  非同期関数(エラー){
    if (401 === error.response.status) {
      setTimeout('console.clear()', 2000)
      (トークンを取得する)場合{
        試す {
          // ログインしましたが、短い T の有効期限が切れています。長い T を使用して短い T を取得します (ユーザー トークンを更新します)
          res = axios({ を待ちます
            url: 'ベースアドレス/v1_0/authorizations',
            メソッド: 'PUT'、
            ヘッダー:{Authorization: `Bearer ${getToken().refresh_token}`}
          })
          // 短いTを更新
          トークン = getToken() とする
          トークン.トークン = res.data.data.トークン
          setToken(トークン)
          // ユーザー操作を続行します。インスタンス(error.config) を返します。
        } キャッチ(エラー){
          // Long T が失敗した場合、ログイン ページにジャンプします。Toast.fail('まずログインしてください')
          router.push({ パス: '/login' })
        }
      } それ以外 {
        // ログインしていない場合はログインページに移動します Toast.fail('まずログインしてください')
        router.push({ パス: '/login' })
      }
    }
    Promise.reject(error) を返します。
  }
)
デフォルトインスタンスをエクスポートする

上記は、Webプロジェクト開発における2つのトークンの理由とサンプルコードの分析の詳細な内容です。Webプロジェクト開発の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueでトークンを取得してヘッダーに書き込む方法
  • Vue ベースのトークン検証のサンプルコード
  • ssmプロジェクトは、ユーザーログインの永続性(トークン)を実装します。
  • Vueプロジェクトでトークン認証を使用する簡単な実践の詳細説明
  • Vueでのログイン検証が成功するとトークンが保存され、各リクエストはトークン操作を伝達して検証する。
  • Vueインターセプターはトークンの有効期限を処理します

<<:  Dockerfile テキストファイルの使用例の分析

>>:  MySQL データベースのステートメント ワイルドカード ファジー クエリの概要

推薦する

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

MySQL MyISAM デフォルト ストレージ エンジンの実装原則

デフォルトでは、MyISAM テーブルはディスク上に .frm (テーブル構造ファイル)、.MYD ...

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

MySQL スライディングオーダー問題の原理と解決の例分析

この記事では、例を使用して、MySQL スライディング順序問題の原理と解決方法を説明します。ご参考ま...

Dockerイメージをプライベートリポジトリにアップロードする方法の例

イメージは、GitHub と同様に Docker パブリック リポジトリに直接簡単にプッシュできます...

JavaScript ジグソーパズルゲーム

この記事の例では、ジグソーパズルゲームを実装するためのJavaScriptの具体的なコードを参考まで...

Win10 インストール Linux システム チュートリアル ダイアグラム

Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...

Linuxシステムでノードプロセスを実行しているが、プロセスを強制終了できない問題を解決します

まず、Linux システムで実行されているノード プロセスはプロセスを強制終了できないことを紹介しま...

DockerでLNMPアーキテクチャを展開する方法

環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...

MySQL における int の最大値の詳細な説明

導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...

初めてDockerイメージを構築、実行、公開、取得するための詳細な手順

1. はじめに以前は、Python アプリケーションの作成を開始したい場合、最初のステップはマシンに...

Linux システムで PATH 環境変数を設定する方法 (3 つの方法)

1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...

ウォーターフォールフローレイアウトを実装する3つの方法

序文今日、Xianyuを閲覧していたとき、各行の高さが同じではないことに気付きました。調べてみると、...

CSS3 は 3D キューブの読み込み効果を作成します

簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...