Vue はトークンを取得してトークン ログインのサンプル コードを実装します

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。

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

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

3. フロントエンドはバックエンドから渡されたトークン値を受け取り、そのトークンをローカル loaclStorage と vuex に保存します。 (このプロジェクトでは、vue フレームワークと vuex グローバル状態管理を使用します)

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

5. パブリックリクエストインターフェースメソッドをパッケージ化し、バックエンドインターフェースの呼び出しを要求するたびにリクエストヘッダーにトークンを挿入します。

6. バックエンドは、リクエスト ヘッダーにトークンがあるかどうかを判断します。トークンがある場合は、トークンを取得してトークンを検証します。検証が成功すると、データが返されます。検証が失敗した場合 (たとえば、トークンの有効期限が切れている場合)、ステータス コード (通常は 401) がフロントエンドに返されます。リクエスト ヘッダーにトークンがない場合も、401 が返されます。(ステップ 6 はバックエンドによって実行され、フロントエンドはバックエンドから返されたステータスに応じて処理するだけで済みます。)

7. フロントエンドバックエンドから返されたステータスコードが 401 の場合、トークンをクリアしてログインページに移動します。

実践的なステップ

1. プロジェクト ストアの store.js ファイルにトークンを保存および削除するためのグローバル メソッドを追加します。

// store.js で、mutation でトークンを追加および削除するメソッドを追加します。import Vue from 'vue'
'vuex' から Vuex をインポートします
Vue.use(Vuex)

const state = { // グローバルに管理されるデータストレージ isLogin:'0',
	 ser:null、
	 token:localStorage.getItem('token') ? localStorage.getItem('token'):'', // トークン
};
デフォルトの新しいVuex.Storeをエクスポートします({
	州、
	getters:{ // データの変更をリッスンする getStorage(state){ // ローカルに保存されているログイン情報を取得する if(!state.token){
	        state.token = JSON.parse(localStorage.getItem(キー))
	      }
	      state.tokenを返す
	    }
	},
	突然変異:
		$_setToken(state, value) { // ストレージトークンを設定する
	        状態.トークン = 値;
	        localStorage.setItem('トークン', 値);
	    },
	    $_removeStorage(state, value){ // トークンを削除
		      localStorage.removeItem('トークン');
	    },
	}
})

2. ログイン ページ (login.vue) のログイン メソッドがインターフェイスを正常に呼び出すと、トークンはローカル ストレージ localStorage に保存されます。

// login.vue ページメソッド:{
	ログインFun(){
		this.$api.post('リクエストされたバックエンドインターフェースリンク',{
				データ:{
					userId:this.user, // ログイン名 userPwd:this.psw, // ログインパスワード }
		}).then((res) => {
			res.data.status == 200の場合{
				var userInfo = res.data.data;
				this.$store.commit('$_setToken', userInfo.token);
				Toast({ message: 'ログイン成功', type: 'success', duration: 1500}); // UI ポップアップ ウィンドウ プロンプト this.$router.push({ name:'homePage' }); // ホームページにジャンプ } else {
				Toast({ message: res.data.message, duration: 1500}); // UI ポップアップ ウィンドウ プロンプト }
		})
	}
}

3. main.js にリクエスト インターセプターを追加し、リクエスト ヘッダーにトークンを追加します。

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./router/router' からルーターをインポートします
'./store/store' からストアをインポートします

import PublicFun from './utils/publicFun' // パブリックメソッド import './mintUi' // 必要に応じて mintUi コンポーネントをインポートします。必要に応じて、mintUi.js で構成します。 import '@/assets/mui/css/mui.css' // mui.css スタイル /* axios プラグインをインポートします */
'axios' から axios をインポートします
Vue.prototype.$http = axios;

// グローバルルーティングコンストラクター。ログインしてページにジャンプするかどうかを決定します。router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.requireAuth)) { // ログインが必要 if(window.localStorage.token && window.localStorage.isLogin === '1'){
      次()
    } そうでない場合 (to.path !== '/login') {
      トークンを window.localStorage.token とします。
      if (トークン === 'null' || トークン === '' || トークン === 未定義){
          次へ({パス: '/login'})
          Toast({ message: 'ログインしていないことが検出されました。操作する前にログインしてください!', 期間: 1500 })
      }
    } それ以外 {
      次()
    }
  } else { // ログインする必要はありません next()
  }
})



//パブリック URL を設定する
Axios.defaults.baseURL = "http://www.sinya.online/api/"
//リクエストインターセプターを追加する axios.interceptors.request.use(
  設定 =>{
    (ストアの状態トークン){
      config.headers.common['token'] = store.state.token
    }
    設定を返します。
  },
  エラー =>{
    //リクエストエラーが発生した場合の対処方法 return Promise.reject(error);
  })

//http レスポンス インターセプター axios.interceptors.response.use(
  応答 =>{
    応答を返します。
  },
  エラー=>{
    if (エラー.応答) {
      スイッチ(エラー.レスポンス.ステータス){
        ケース401:
          localStorage.removeItem('トークン');
          ルータ.replace({
            パス: '/views/login',
            query: {redirect: router.currentRoute.fullPath}//ログインに成功したら、現在閲覧しているページにジャンプします})
      }
    }
  })

Vue.prototype.$publicFun = PublicFun // グローバル パブリック メソッドをマウント Vue.prototype.$apps = Apps // app.js パブリック メソッド Vue.config.productionTip = false

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App)
}).$mount('#app')

トークンを見る

ここに画像の説明を挿入

退出時

returnFun(){ // ログアウト MessageBox.confirm(this.lang.logoutTip).then(action => {
	     this.$store.commit('$_removeStorage'); // ログイン情報をクリアする this.$router.push({
	         名前:'ログイン'
	     });
	     トースト({message:this.lang.logoutSuccess, 期間: 1500});
	 }).catch(()=>{})
} 

これで、トークンログインを実装するためのトークンを取得するvueのサンプルコードに関するこの記事は終了です。より関連性の高いvueトークンログインコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します
  • Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)
  • Vueはユーザーログインとトークン検証を実装します
  • VUEはトークンログイン認証を実装
  • Vue ログイン登録とトークン検証の実装コード

<<:  デザインにおいて無視できないインタラクティブデザインにおける製品状態の分析

>>:  CSSペイントAPIを使用して、解像度に依存しない可変背景効果を動的に作成します。

推薦する

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...

まだ*を選択しますか?

アプリケーションが牛のように遅い理由は数多くあります。ネットワーク、システム アーキテクチャ、または...

IE における条件付きコメントの利点と欠点

IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

よくある HTML タグの記述エラー

HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...

sed コマンドを使用してファイルの特定の行を効率的に削除する方法

序文通常、ファイル内の特定の行を削除したい場合は、まずファイルを開き、削除する内容を見つけて、これら...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

mysql 8.0.18 mgr のインストールと切り替え機能

1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...

MySQL の自動増分主キーが使い果たされた場合の対処方法

面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...

MySQL データベース設計 3 つのパラダイム例分析

3つのパラダイム1NF: フィールドは分離不可能です。 2NF: 主キーがあり、非主キー フィールド...

HTML の基本概要推奨事項 (段落)

HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...