フロントエンドとバックエンドを完全に分離する場合、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル
>>: MySQL クロステーブルクエリとクロステーブル更新
目次1. 挿入のいくつかの構文1-1. 通常の挿入文1-2. 挿入または更新1-3. 挿入または交換...
<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...
1. デッドロックとは何ですか?正式な定義は次のとおりです: 2 つのトランザクションが相手側で必要...
目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...
CentOS6.7にmysql5.7.18をインストールする 1. /usr/localディレクトリ...
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...
序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...
序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...
1. タイトルHTML では、<h1></h1> から <h6>...
最初のもの:コードをコピーコードは次のとおりです。 <html> <ヘッド>...
最初のパラメータ渡し方法は、動的ルーティングパラメータ渡しです。リンクのパス属性を設定することで、ル...
今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...
1. inodeの紹介inode を理解するには、まずファイル ストレージから始める必要があります。...
Windows のデフォルトのスクロール バー スタイルは見苦しく、プロジェクト内でスクロール バー...