VUEはトークンログイン認証を実装

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

このログイン機能を実装するプロセスは紆余曲折に満ちていました。途中でバグが発生し、問題を解決するのに2、3日かかりました。私は疲れ果て、圧倒されました。自分の忍耐力と忍耐力が新しいレベルに引き上げられたと感じました。

幸い、クラスメイトの助けを借りて最終的にバグを解決しましたが、改めて新人の浅はかさを感じました。大物たちの質問は、私の知識の盲点に何度も触れました... 今後ミスをしないように、トークンログイン認証を実装する手順を詳しく記録します。

1. ストアの操作メソッドをトークンにカプセル化する

まず、srcディレクトリにstoreフォルダを作成し、main.jsファイルを作成します。

main.js に保存されているコードは、トークンの値を取得し、localStorage を使用してローカル トークンの値を格納および削除するために使用されます。

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
 
Vue.js で Vuex をビルドします。
 
デフォルトの新しいVuex.Storeをエクスポートします({
  州: {
    トークン: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
  突然変異:
    setToken (状態、トークン) {
      state.token =トークン;
      localStorage.setItem("token",token.token); //トークンを保存する
    },
    delToken(状態) {
      状態.トークン = '';
      localStorage.removeItem("token"); //トークンを削除
    }
  }
})

2. 確認のためにページのログインインターフェースに接続します

ログイン

(1)入力ボックスコード

<input type="text" v-model="username" placeholder="ユーザー名" />
<input type="password" v-model="password" placeholder="password"/>

(2)スクリプトコード

<スクリプト>
  'vuex' から { mapMutations } をインポートします。
  エクスポートデフォルト{
    名前: "managerLogin",
    データ() {
      戻る {
        ユーザー名:'', //ユーザー名パスワード:'', //パスワード};
    },
    方法:{
      ...mapMutations(['setToken'])、
      ログイン:関数() {
        if (this.username === '' || this.password === '') {
          alert("アカウントまたはパスワードは空にできません!");
        }
        それ以外 {
          //APIインターフェースに従ってトークンを取得します
          this.$ajax.get('http:///api/wx/Public/login', {
            params: { //受信パラメータ username: this.username、password: this.password、device_type: "mobile"
            }
          })。それから(
            解像度 => {
              コンソールにログ出力します。
              if(res.data.code===1) { //code=1 の場合、検証は成功です this.setToken({token: res.data.data.token}); //ストアにトークンを割り当てるメソッド this.$router.push('/managerHome');
              }
              それ以外{
                alert(res.data.msg); //ポップアップエラーメッセージ}
            }).catch(エラー => {
            alert('インターフェース接続エラー');
            コンソール.log(エラー);
          });
 
        }
      }
  }
</スクリプト>

ログアウト

<スクリプト>
    「vuex」から {mapMutations} をインポートします。
    エクスポートデフォルト{
      名前: "manager_infor",
      方法:{
        ...mapMutations(['delToken'])、
        終了:関数(){
          this.delToken({トークン:''});
          this.$router.push('/managerLogin');
        }
      }
    }
</スクリプト>

3. ルーティングガード

このコードはルーティングファイルに配置されます。その機能は、ページがジャンプする前にログイン検証のためにローカルに保存されたトークン値をチェックし、ジャンプするかどうかを決定することです。

router.beforeEach((to, from, next) => {
  if (to.path === '/managerLogin') { //ジャンプ先のページがログインインターフェースの場合 next(); //直接ジャンプ}
  else if (to.path === '/managerHome'){ // ジャンプ先のページが個人用インターフェースの場合 let token = localStorage.getItem('token'); // ローカルに保存されているトークン値を取得します if (token===null||token===''){ // トークンが空の場合、検証は失敗し、ログイン ページにジャンプします next('/managerLogin');
    }
    else{ //空でない場合、検証は成功です next();
    }
  }
  それ以外{
    次();
  }
});
 
デフォルトルーターをエクスポートします。

4.Axios リクエストインターセプター

このコードはsrcファイルの下のmain.jsファイルに配置されます。

「axios」からaxiosをインポートします。
'./store/main' からストアをインポートします。
Vue.prototype.$ajax = axios
 
新しいVue({
  el: '#app',
  ルーター、
  store, //store に追加する必要があるコンポーネント: { App },
  テンプレート: '<App/>'
})
 
//リクエストインターセプター axios.interceptors.request.use(config => {
// トークンが存在するかどうかを確認します。存在する場合は、各ページのヘッダーにトークンを追加します。
  (ストアの状態トークン){
    
    config.headers.common['XX-Token']=store.state.token //ここでのXX-Tokenは、ログインインターフェースのリクエストヘッダーの名前に従って記述する必要があります}
 
  設定を返します。
}, エラー => {
// リクエストエラー return Promise.reject(error);
});
 
//レスポンスインターセプター axios.interceptors.response.use(
  レスポンス => {
    応答を返します。
  },
  
  error => { //デフォルトでは、2XX以外のすべてのエラーがエラーとみなされます if (error.response) {
      スイッチ(エラー.レスポンス.ステータス){
        ケース401:
          this.$store.commit('delToken');
          router.replace({ //ログインページパスにジャンプ: '/managerLogin',
            query: { redirect: router.currentRoute.fullPath } // リダイレクトされたルート パスをパラメーターとして受け取り、ログインが成功した後にルートにジャンプします});
      }
    }
    Promise.reject(error.response); を返します。
  }
);

ミッション完了!

参考までに、バックエンドインターフェースのデータ構造を掲載します。 上記のコードは、異なるインターフェースを使用すると若干異なるため、柔軟に使用する方法を知っておく必要があります。

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

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

<<:  MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

>>:  Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します

推薦する

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 2)

上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...

nginxとlvsのメリットとデメリット、そして適切な使用環境

まず最初に、ロード バランシングとは何かについて説明します。ロード バランシングとは、リクエストの内...

MySQL 5.7.18 でパスワードを変更する方法

MySQL 5.7.18 でパスワードを変更する方法: 1. まずMySQLサーバーをシャットダウン...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

Vue で @person 関数を実装する方法

この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...

docker デプロイメントの実装手順 lnmp-wordpress

目次1. 実験環境2. Dockerソースをインストールする3. Dockerをインストールする4....

FastApi+Vue+LayUIを使用してフロントエンドとバックエンドを分離するサンプルコード

目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...

CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード

今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...

MySQL はリレーショナルデータベースですか?

MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...

Docker での FastAPI デプロイの詳細なプロセス

Docker 学習https://www.cnblogs.com/poloyy/p/15257059...

vsftp を使用して Linux で FTP サーバーを構築する (パラメータの説明付き)

導入この章では、主に Linux で FTP サーバーを構築するプロセスを紹介します。習得すべき重要...

WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...

MySQL ユーザーと権限、およびルートパスワードをクラックする方法の例

MySQL ユーザーと権限MySQL には、MySQL と呼ばれるシステムに付属するデータベースがあ...

「@INC で ExtUtils/MakeMaker.pm が見つかりません」というエラーを解決する

mha4mysql をインストールする場合の手順は、おおよそ次のようになります: unzip、per...