Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

この記事の例では、Vueプロジェクトでのトークン検証ログインの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. はじめに

現在、卒業プロジェクトに取り組んでいます。バックエンドを担当しており、フロントエンドについてはあまり詳しくありません。Vue フレームワークを 2 週間近く見てきましたが、少し初心者のように感じています。そのため、この記事はうまく書かれていない可能性があります。単なる記録です。間違っている点や不十分な点がありましたら、ご指摘ください。

2. 問題

ログイン インターフェイスを作成するときに、ログインを検証するためにトークンを使用することにしました。使用したフロントエンド フレームワークは、Vue.js と element-ui です。Vue でトークンを使用してログインを検証する方法。

3. 考える

1. トークンを使用してログインを検証します。ユーザーがログインすると、バックエンドはトークンを生成し、フロントエンドに返します。フロントエンドはトークンをリクエスト ヘッダーに配置し (これは Baidu のもので、通常はリクエスト ヘッダーに配置されます)、インターフェイスを呼び出してトークンをリクエスト ヘッダーに配置し、バックエンドに返します。
2. ユーザーがログインした後、フロントエンドはトークンを保存し、後でリクエストを送信するときにそれを取り出す必要があります。
3. 各リクエストを送信するときにリクエスト ヘッダーにトークンを追加し、グローバル インターセプターを記述します。

4. 記録と指示

1. srcフォルダの下にstoreフォルダを作成し(私のvueプロジェクトはvue-cli scaffoldingで作成されています)、storeにindex.jsを作成します。

2. src/store/index.js

Vue フォーム 'vue' をインポートします。
'vuex' から Vuex をインポートします。

Vue.js で Vuex をビルドします。

定数ストア = 新しい Vuex.Store({
 州: {
  トークン: localStorage.getItem('token') ? localStorage.getItem('token') : ''
 },
 ミューテーション:
  setToken (状態、トークン) {
   state.token =トークン;
   localStorage.setItem("トークン",token.token);
  },
  delToken(状態) {
   状態.トークン = '';
   localStorage.removeItem("トークン");
  }
 }
})

デフォルトストアをエクスポートします。

例:

(1) src/store/index.jsにコンテンツを書き込む前に、プロジェクトにVuexをインストールする必要があります。ここではnpmのインストール方法のみを提供します。プロジェクトのルートディレクトリでcmdを開き、次のコマンドを入力してEnterキーを押します。

npm インストール vuex --save

(2) この store/store/index.js で、コード token.token となっているのは、login.vue でこのメソッドを呼び出すときにオブジェクトが渡される(文字列を渡したと思っても、なぜオブジェクトに入れられるのかは分かりません)ためであり、渡されたオブジェクトには属性 token があります。

localStorage.setItem("トークン",token.token);

3. src/main.js

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'axios' から axios をインポートします
'es6-promise' から promise をインポートします
'./store/index' からストアをインポートします
promise.polyfill()

Vue.use(要素UI)
Vue.config.productionTip = false
 

axios.defaults.baseURL = 'http://192.168.80.152:8088'
axios.defaults.headers.post['Content-Type'] = "application/json"
axios.defaults.withCredentials = true
axios.defaults.headers.common['Authorization'] = store.state.token
Vue.prototype.$axios = axios
 

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  ルーター、
  店、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
});

// リクエストインターセプターを追加 axios.interceptors.request.use(config => {
// リクエストを送信する前に行うべきこと // トークンが存在するかどうかを確認し、存在する場合は各ページヘッダーにトークンを追加します
  (ストアの状態トークン){
    config.headers.common['Authorization']=store.state.token.token
  }

  設定を返します。
}, エラー => {
// リクエストエラーに対して何かを実行します。 return Promise.reject(error);
});

// http レスポンス インターセプター axios.interceptors.response.use(
  レスポンス => {

    応答を返します。
  },
  エラー => {

    if (エラー.応答) {
      スイッチ (エラー.応答.ステータス) {
        ケース401:
          this.$store.commit('del_token');
          ルータ.replace({
            パス: '/login',
            query: {redirect: router.currentRoute.fullPath}//ログインに成功したら、現在閲覧しているページにジャンプします})
      }
    }
    Promise.reject(error.response.data) を返します。
  });

例示する

(1) これが完全なコードです。このコードと同じではないかもしれません。トークン検証の使用について説明しましょう。src/main.js で何を設定すればよいでしょうか? (2)

'./store/index' からストアをインポートします

上記のコードは、以前に記述したsrc/store/index.jsをmain.jsにインポートします。

新しいVue({
  el: '#app',
  ルーター、
  店、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
});

上記のコードのストアはVueにマウントされており、this.$storeを使用してストアを取得できます。

(3)

// リクエストインターセプターを追加 axios.interceptors.request.use(config => {
// リクエストを送信する前に行うべきこと // トークンが存在するかどうかを確認し、存在する場合は各ページヘッダーにトークンを追加します
  (ストアの状態トークン){
    config.headers.common['Authorization']=store.state.token.token
  }

  設定を返します。
}, エラー => {
// リクエストエラーに対して何かを実行します。 return Promise.reject(error);
});

// http レスポンス インターセプター axios.interceptors.response.use(
  レスポンス => {

    応答を返します。
  },
  エラー => {

    if (エラー.応答) {
      スイッチ (エラー.応答.ステータス) {
        ケース401:
          this.$store.commit('del_token');
          ルータ.replace({
            パス: '/login',
            query: {redirect: router.currentRoute.fullPath}//ログインに成功したら、現在閲覧しているページにジャンプします})
      }
    }
    Promise.reject(error.response.data) を返します。
  });

上記のコードは、リクエストのリクエストヘッダーにトークンを入れるリクエストインターセプターです。

4. src/router/index.js

router.beforeEach((to, from, next) => {
  if(to.path === '/login') {
    次();
  } それ以外 {
    トークンを localStorage.getItem('token') にします。
    if(トークン === 'null' || トークン === '') {
      次へ('/ログイン');
    }それ以外 {
      次();
    }
  }
});

例示する

(1) 上記コードはsrc/router/index.jsの設定です。ルータを公開する必要があります。コード内にexport defaultがあります。

**5. src/components/login/login.vue **

//このコンポーネントのエクスポートのデフォルトに何かを導入します。スクリプトタグ import { mapMutations } from 'vuex';
//これはメソッド部分です。メソッド: {

      ...mapMutations(['setToken'])、
      ログイン(フォーム){


        _this = this とします。
        if(form.phone === "" || form.password === ""){
          _this.$message.error("電話番号またはパスワードを入力してください");
        }それ以外 {
          this.$axios.post(`/user/check/login`,_this.form).then(res => {
            var コード = res.data.code;
            var mes = res.data.message;
            if(コード === 1){
             /* storage.setItem("token",res.data.data);
              _this.token = res.data.data;*/
             // _this.setToken({認証: _this.token})
             // console.log("成功");
              _this.$message.success('ログインに成功しました');
              _this.token = res.data.data;
              _this.setToken({トークン: _this.token});
              _this.$router.push({path:"/home"});

              var ストレージ = window.localStorage;
              //アラート(storage.getItem("トークン"));

              if(this.$store.state.token) {
                this.$router.push('/home');
                console.log(this.$store.state.token.token);
              } それ以外 {
                this.$router.replace('/login');
              }

            }それ以外{
              _this.$message.error(mes);
            }
          }).catch(関数(err){
            コンソールログ(エラー);
            _this.$message.error("ログインエラーです。プログラム開発者に連絡してください!!");

          })
        }

      }
     }

例示する

(1)

_this = this とします。

上記のコードは、変数 _this に this を入れます。関数には、通常の関数: function(){} と矢印関数の 2 種類があります。通常の関数の this は、現在のオブジェクトの参照を参照します。ここでの現在のオブジェクトは不確定です。矢印関数の this はグローバルです。this によって表されるオブジェクトは不変であり、いかなる方法でも変更できません。具体的な違いについては、「矢印関数と通常の関数の違い」を参照してください。

 _this.setToken({トークン: _this.token});

上記のコードは、src/store/index.js の setToken() メソッドを呼び出します。_this で呼び出せるのは、以前にストアが src/main.js の vue にマウントされていたためです。

...mapMutations(['setToken'])、

src/components/login/login.vue の login() メソッドの前にコードがあります。それが何をするのかわかりません。指定されたスコアのメソッドかもしれません。これは、その中のパラメータに基づいた私の推測です。正しくないかもしれません。誰かが私にアドバイスをくれることを願っています。

以下は参考記事ですが、どれもよく書かれています。

1. Vueでトークンを取得してヘッダーに書き込む方法
2. Vueプロジェクトでユーザーログインとトークン検証を実装する

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

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

<<:  MySQLの高性能最適化スキルの概要

>>:  ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル

推薦する

HTML タグ dl dt dd 使用方法

基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明

電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...

Linux lseek関数の使い方の詳しい説明

注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...

MySQLの基本操作学習ノートテーブル

テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

Centos7 で Java8 と MySQL をインストールしてデプロイする

通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...

Vueプロジェクトのパッケージ化の詳細な説明

目次1. 関連構成ケース1(使用ツールはvue-cil)ケース2(使用するツールはwebpack) ...

Tomcat プロセスの CPU 使用率が高い場合の解決策

目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...

絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明

この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...

docker compose helloworld を使い始めるための詳細なプロセス

前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...

MySQL 8.0.16 Win10 zip バージョンのインストールと設定のグラフィック チュートリアル

この記事では、MySQL 8.0.16 Win10 zip版のインストールと設定のグラフィックチュー...

Vueは複数の画像の追加、表示、削除を実装します

この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...

WeChatアプレットがSMS認証コード送信のカウントダウンを実装

この記事では、WeChatアプレットがSMS認証コードのカウントダウンを送信するための具体的なコード...