この記事では、トークンログイン認証を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更
>>: Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します
目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...
上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...
まず最初に、ロード バランシングとは何かについて説明します。ロード バランシングとは、リクエストの内...
MySQL 5.7.18 でパスワードを変更する方法: 1. まずMySQLサーバーをシャットダウン...
この記事では、js+canvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...
この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...
目次1. 実験環境2. Dockerソースをインストールする3. Dockerをインストールする4....
目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...
今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
Docker 学習https://www.cnblogs.com/poloyy/p/15257059...
導入この章では、主に Linux で FTP サーバーを構築するプロセスを紹介します。習得すべき重要...
WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...
MySQL ユーザーと権限MySQL には、MySQL と呼ばれるシステムに付属するデータベースがあ...
mha4mysql をインストールする場合の手順は、おおよそ次のようになります: unzip、per...