Vueはユーザーログインとトークン検証を実装します

Vueはユーザーログインとトークン検証を実装します

フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的な考え方は次のとおりです。

1. 初めてログインする場合、フロントエンドはバックエンドのログインインターフェースを呼び出し、ユーザー名とパスワードを送信します。

2. バックエンドはリクエストを受信し、ユーザー名とパスワードを検証し、検証が成功した場合はフロントエンドにトークンを返します。

3. フロントエンドはトークンを取得し、それをlocalStorageとvuexに保存し、ルーティングページにジャンプします。

4. フロントエンドがルートにジャンプするたびに、localStorage にトークンがあるかどうかを判断します。トークンがない場合は、ログイン ページにジャンプします。トークンがある場合は、対応するルート ページにジャンプします。

5. バックエンドインターフェースを呼び出すたびに、リクエストヘッダーにトークンを追加する必要があります。

6. バックエンドは、リクエスト ヘッダーにトークンがあるかどうかを確認します。トークンがある場合は、トークンを取得して検証します。検証が成功した場合は、データを返します。検証が失敗した場合 (たとえば、トークンの有効期限が切れている場合)、401 を返します。リクエスト ヘッダーにトークンがない場合も、401 を返します。

7. フロントエンドで受信したステータスコードが401の場合、トークン情報をクリアしてログインページにジャンプします。

vue-cli はプロジェクトをビルドし、フロントエンドで実行する必要があることを簡単に説明します。

1. ログインインターフェースが正常に呼び出され、トークンはコールバック関数のlocalStorageとvuexに保存されます。

ログイン.vue

<テンプレート>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="ユーザー名"/>
    <input type="text" v-model="loginForm.password" placeholder="パスワード"/>
    <button @click="login">ログイン</button>
  </div>
</テンプレート>
 
<スクリプト>
'vuex' から { mapMutations } をインポートします。
エクスポートデフォルト{
  データ () {
    戻る {
      ログインフォーム: {
        ユーザー名: ''、
        パスワード: ''
      },
      ユーザートークン: ''
    };
  },
 
  メソッド: {
    ...mapMutations(['changeLogin'])、
    ログイン() {
      _this = this とします。
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('アカウントまたはパスワードは空にできません');
      } それ以外 {
        this.axios({
          メソッド: 'post'、
          URL: '/user/login',
          データ: _this.loginForm
        }).then(res => {
          コンソールにログ出力します。
          _this.userToken = 'Bearer' + res.data.data.body.token;
          // ユーザートークンを vuex_this.changeLogin({ Authorization: _this.userToken }); に保存します。
          _this.$router.push('/home');
          alert('ログインに成功しました');
        }).catch(エラー => {
          alert('アカウントまたはパスワードエラー');
          コンソール.log(エラー);
        });
      }
    }
  }
};
</スクリプト> 

ストアフォルダ内のindex.js

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
Vue.js で Vuex をビルドします。
 
定数ストア = 新しい Vuex.Store({
 
  州: {
    //トークンを保存
    認証: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
 
  突然変異:
    // トークンを変更し、localStorage に保存します
    changeLogin (状態、ユーザー) {
      状態.承認 = ユーザー.承認;
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});
 
デフォルトストアをエクスポートします。

2. ルーティングナビゲーションガード

ルーターフォルダ内のindex.js

'vue' から Vue をインポートします。
'vue-router' から Router をインポートします。
'@/components/login' からログインをインポートします。
'@/components/home' から home をインポートします。
 
Vue.use(ルーター);
 
const router = 新しいルーター({
  ルート: [
    {
      パス: '/'、
      リダイレクト: '/login'
    },
    {
      パス: '/login',
      名前: 'ログイン',
      コンポーネント: ログイン
    },
    {
      パス: '/home',
      名前: 'ホーム',
      コンポーネント: ホーム
    }
  ]
});
 
// ナビゲーションガード // router.beforeEach を使用してグローバルフロントガードを登録し、ユーザーがログインしているかどうかを判断します router.beforeEach((to, from, next) => {
  to.path === '/login'の場合{
    次();
  } それ以外 {
    トークンを localStorage.getItem('Authorization') に設定します。
 
    if (トークン === null || トークン === '') {
      次へ('/ログイン');
    } それ以外 {
      次();
    }
  }
});
 
デフォルトルーターをエクスポートします。

3. リクエストヘッダーにトークンを追加する

// リクエストインターセプターを追加し、リクエストヘッダーにトークンを追加します
axios.interceptors.request.use(
  設定 => {
    localStorage.getItem('Authorization') の場合
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
 
    設定を返します。
  },
  エラー => {
    Promise.reject(error) を返します。
});

4. ステータスコードが401の場合は、トークン情報をクリアしてログインページに移動します。

localStorage.removeItem('承認');
this.$router.push('/login');

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VUEはトークンログイン認証を実装
  • Vueはログイン認証コードを実装する
  • Vue ログイン スライディング検証実装コード
  • vue-route の beforeEach を使用してナビゲーションガード (ルートジャンプ前にログインを確認する) 機能を実装します。
  • Vue 実戦 Vue ログイン認証実装コード
  • Vue ログイン登録とトークン検証の実装コード
  • Vueで検証ログインステータスを実装する方法
  • vue router+vuex はホームページのログイン検証ロジックを実装します
  • トークンの有効期限が切れた後にログインページにジャンプするためにルーティングフックを使用する Vue の例
  • Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

<<:  Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

>>:  MySQL クロステーブルクエリとクロステーブル更新

推薦する

MySQL の挿入ステートメントの使用実体験

目次1. 挿入のいくつかの構文1-1. 通常の挿入文1-2. 挿入または更新1-3. 挿入または交換...

複雑なウェブサイトのナビゲーションを簡素化

<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...

MySQL (InnoDB) がデッドロックを処理する方法の詳細な説明

1. デッドロックとは何ですか?正式な定義は次のとおりです: 2 つのトランザクションが相手側で必要...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明

CentOS6.7にmysql5.7.18をインストールする 1. /usr/localディレクトリ...

Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...

Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...

MySQL バッチ挿入ループの詳細なサンプルコード

背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...

よく使われる HTML 形式のタグ_Powernode Java Academy

1. タイトルHTML では、<h1></h1> から <h6>...

HTML 選択タグにリンクを追加する 3 つの方法

最初のもの:コードをコピーコードは次のとおりです。 <html> <ヘッド>...

反応ルーティングでパラメータを渡すいくつかの方法についての簡単な説明

最初のパラメータ渡し方法は、動的ルーティングパラメータ渡しです。リンクのパス属性を設定することで、ル...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

Linux インデックスノード inode の詳細な説明

1. inodeの紹介inode を理解するには、まずファイル ストレージから始める必要があります。...

CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明

Windows のデフォルトのスクロール バー スタイルは見苦しく、プロジェクト内でスクロール バー...