この記事の例では、Vueプロジェクトでのトークン検証ログインの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. はじめに現在、卒業プロジェクトに取り組んでいます。バックエンドを担当しており、フロントエンドについてはあまり詳しくありません。Vue フレームワークを 2 週間近く見てきましたが、少し初心者のように感じています。そのため、この記事はうまく書かれていない可能性があります。単なる記録です。間違っている点や不十分な点がありましたら、ご指摘ください。 2. 問題ログイン インターフェイスを作成するときに、ログインを検証するためにトークンを使用することにしました。使用したフロントエンド フレームワークは、Vue.js と element-ui です。Vue でトークンを使用してログインを検証する方法。 3. 考える1. トークンを使用してログインを検証します。ユーザーがログインすると、バックエンドはトークンを生成し、フロントエンドに返します。フロントエンドはトークンをリクエスト ヘッダーに配置し (これは Baidu のもので、通常はリクエスト ヘッダーに配置されます)、インターフェイスを呼び出してトークンをリクエスト ヘッダーに配置し、バックエンドに返します。 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でトークンを取得してヘッダーに書き込む方法 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル
基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...
注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...
テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...
目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...
通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...
目次1. 関連構成ケース1(使用ツールはvue-cil)ケース2(使用するツールはwebpack) ...
目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...
この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...
序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...
前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...
この記事では、MySQL 8.0.16 Win10 zip版のインストールと設定のグラフィックチュー...
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
この記事では、WeChatアプレットがSMS認証コードのカウントダウンを送信するための具体的なコード...