Vueのログインとログアウトの詳細な説明

Vueのログインとログアウトの詳細な説明

まず、エフェクトの実装プロセスを見てみましょう。

まず、概要とビジネスプロセスおよび関連する技術的なポイントにログインします

  • 記録ページのレイアウト
  • 2つのVue.jsファイルを作成する
  • ログインページと登録ページを作ってみましょう
  • ログインページのレイアウト
  • ルートの設定
  • ログインフォームのデータバインディング
  • ログインフォームの検証ルール
  • ログインフォームのリセット
  • ログイン事前認証
  • ログインコンポーネント構成ポップアッププロンプト
  • ログイン成功後の動作
  • ログイン後にトークンをクライアントのセッションストレージに保存する
  • プログラムによるナビゲーションを通じてバックエンドのホームページにジャンプします。ルーティング アドレスはデフォルトのパス '/' です。
  • ホームページからログアウトすると、コンポーネント構成ポップアップウィンドウが表示され、removeItemを使用してトークンを削除するように求められます。

ログインビジネスプロセス

1. ログインページでユーザー名とパスワードを入力します

2. 検証のためにバックエンドインターフェースを呼び出す

3. 検証後、背景の応答状況に応じてプロジェクトのホームページにジャンプします

ログイン機能の実装

1.まず、ルーティングガードを使用してログインを確認し、ログインする必要があるかどうかを判断します。

{
    パス:'/login',
    名前:"ログイン",
    コンポーネント:ログイン、
    メタ:{
      ログイン:true
    }
} 
  // ログインが必要な場所で meta-true を定義して、ログインが必要かどうかを確認します。if(to.matched.some(item=>item.meta.login)){//ログインが必要です。console.log("ログインが必要です");
    if(isLogin){//1. すでにログインしている場合は、直接渡します if(data.error===400){//バックエンドはログインに失敗したことを伝えます next({name:'login'})
            localStorage.removeItem('トークン');
            戻る;
        }
        if(to.name==='ログイン'){
            次へ({name:'ホーム'})
        }それ以外{
            次()
        }
        戻る;
    }
    if(!isLogin && to.name==='login'){//2. ログインしていないが、ログインページに進む next()
    }
    if(!isLogin && to.name !=='login'){//3. ログインしていない、ログインページではない next({name:"login"})
    }
   }else{//ログインする必要はありません。直接次へ進みます()
   }

2. フォーム検証ルールには、Elementコンポーネントライブラリを使用します。

Elementを使用してテンプレートにスタイルレイアウトを記述します

 <div class="ログインセクション">
    <!-- :rules="ルール" -->
    <el-フォーム
      ラベル位置="上"
      ラベル幅="100px" クラス="demo-ruleForm"
      :rules="ルール"
      :model="ルールから"
      ステータスアイコン
      ref="ルール元"
    >
      <el-form-item label="ユーザー名" prop="名前">
        <!-- v-model を使用してユーザーが入力した名前を取得します -->
        <el-input type="text" v-model="rulesFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="パスワード" prop="パスワード"></el-form-item>
        <!-- v-model を使用してユーザーが入力したパスワードを取得します -->
        <el-input type="password" v-model="rulesFrom.password"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 送信イベントを定義する -->
        <el-button type="primary" @click="submitFrom('ruleFrom')">送信</el-button>
        <el-button>リセット</el-button>
      </el-form-item>
    </el-form>
  </div>

フォームの検証ルールを定義する

詳細については、Elementの公式ウェブサイトをご覧ください。

データで定義

ルールFrom:{
        名前:''、
        パスワード:''
      },
      ルール:
        名前:[
          // 検証ルール {required:true,message:'ユーザー名を入力してください',trigger:'blur'},
          {min:1,max:5,message:'長さは 1 文字から 5 文字です',trigger:'blur'}
        ]、
        パスワード:[
          {required:true,message:'パスワードを入力してください',trigger:'blur'},
          {min:1,max:5,message:'長さは 1 文字から 5 文字です',trigger:'blur'}
        ]
      }

メソッドで送信イベントを定義する

 // 送信をクリックすると、フォーム内のすべての情報を取得するメソッドがトリガーされます。submitFrom(formName){
      this.$refs[formName].validate( (valid)=>{
        if(有効){
          // 検証に合格すると、ユーザー情報とパスワードがバックエンドに返されます login({
            名前:this.rulesFrom.name、
            パスワード:this.rulesFrom.password,
          }).then((データ)=>{
            コンソールにログ出力します。
            if(データコード===0){
              localStorage.setItem('トークン',data.data.token)
              ウィンドウの場所.href='/';
            }
            if(データコード===1){
              this.$message.error(データ.メッセージ)
            }
          })
        }それ以外{
          console.log('送信エラー!!');
          偽を返す
        }
      })
    }

このとき、ログアウトを書いてルータ内で変換するbeforeEach

const トークン = localStorage.getItem('トークン');
// ! !トークンはブール型に変換されます const isLogin=!!token;
// ルートに入るときは、トークンをバックエンドに返して、それが正当かどうかを確認する必要があります。const data = await userInfo();
    Store.commit('chageUserInfo',data.data)

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue でのログインとログアウトの実装例
  • Vue実戦記録のログインページの実装
  • vue-cli3と要素に基づいたログインページの実装
  • vue+koa2 を使用してセッションとトークンのログインステータス検証を実装する例

<<:  MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

>>:  deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

推薦する

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

DockerはRedis5.0をビルドし、データをマウントします

目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...

Json の長所と短所、使用方法の紹介

目次1. JSONとは何か1.1 配列リテラル1.2 オブジェクトリテラル1.3 混合リテラル1.4...

Intelli Idea で Tomcat 設定が見つからない問題の解決方法

2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...

CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...

jsはフォーム検証機能を実装します

この記事の例では、フォーム検証機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

MySQL 8.0.12 解凍バージョンのインストールチュートリアル

この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...

デザイン理論:テキスト表現とユーザビリティ

<br />テキストデザインでは、通常、テキストのレイアウト、つまりテキストをより美しく...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

Dockerは起動されていないコンテナの設定情報を変更します

私が初めてdockerを使用したときは、dockerfileやdocker-composeを使用して...

Ubuntu 18.04 に VMware Tools をインストールする際のエラーを解決する

1. オンライン チュートリアルによると、Ubuntu 18.04 のインストールはまだ失敗します。...

Nginx でバージョン番号を隠したり偽造したりする方法

1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...

Vue2は応答性を提供するためにprovide injectを実装しています

1. vue2 での従来の書き方 // 親コンポーネントは 'foo' を提供します...