導入
リンクhttps://auth.nuxtjs.org/api/options/#cookie 始めるこのドキュメントによると、@nuxt/auth を使用した後、指定された cookie: false が表示されない場合は、認証トークンがデフォルトで cookie に保存されます (上記の localstorage についても同様) インターフェースはリクエスト時に Cookie からトークンを取得し、それをインターフェース資格情報としてサーバーに送信します。 ディレクトリ構造 nuxt-distは、npm run devまたはnpm run buildのたびにwebpackによって生成されるファイルです。その中のコードは、実際に最後に呼び出すコードとみなすことができます(ここで直接変更やデバッグを行うこともできますが、プロジェクトを再実行するたびに復元されます。 nuxt/auth にはいくつかのスキームがあります。たとえば、この nuxt-dist/auth/schemes/local.js を参照してください。 私たちが書いたコードでは、$auth.loginWith を使用してこれを呼び出しましたが、実際には、loginWith は最終的に login を呼び出します。 次に、nuxt-dist/auth/schemes/local.jsにあるログインを確認します。 nuxt-dist は、npm run dev または npm run build のたびに webpack によって生成されるファイルです。ここのコードは、最後に実際に呼び出すコードと見なすことができます (ここで直接変更してデバッグすることもできますが、プロジェクトを再実行するたびに復元されます)。 私たちが書いたコードでは、$auth.loginWith を使用してこれを呼び出しましたが、実際には、loginWith は最終的に login を呼び出します。 次に、nuxt-dist/auth/schemes/local.jsにあるログインを確認します。 メソッド内の this.name は auth.strategy であり、これは local、local1 などであり、上記の loginWith メソッド内の setStrategy() は auth.strategy 情報をローカルに保存します。 この方法では この方法では、_keyは._token.localに組み立てられます。 最後に、このメソッドは setCookie メソッドと serLocalStorage メソッドを呼び出し、トークンを cookies と localstorage に保存し、setCookie で再度組み立てられ、デフォルトで auth である cookies.prefix が追加されます。 最後にシリアル化後、Cookie に保存されます。 ログインと認証のロジック全体は基本的に次のようになります。 コードを読み進めてくださいnuxt.config.jsで複数の認証を設定することもできます: {strategies: {local WeChatでログイン、携帯電話番号でログイン、アカウントでログイン… 自動フェッチ https://auth.nuxtjs.org/schemes/local user.autoFetch が true (デフォルト) の場合、endpoints.user はログインが成功するとすぐにリクエストを送信します。このエンドポイントは、ユーザー プロパティに直接割り当てられた特定のユーザーの JSON 情報で応答する必要があります。 ログイン セッションから直接ユーザー情報を返す場合は、user.autoFetch を false に設定し、loginWith 応答からユーザー情報を取得して、setUser に渡します。 ユーザー情報の取得を完全に無効にしたい場合は、endpoints.user: false を設定します。これは、ユーザー情報エンドポイントが呼び出されないことを意味しますが、フロントエンドはユーザーについて何も知らないことも意味します。つまり、this.$auth.user は {} になります。 ps: インターフェースを置き換える必要があるため、ユーザーは自動的にクエリを実行し、結果として生じるエラーは開発に役立ちません。コメントを通じて段階的に開発できます。 ユーザー: { 自動フェッチ: false、 }, プロキシ設定プロジェクトのバックエンドインターフェースは、バックエンドローコードプラットフォームとJavaインターフェースに基づいています。インターフェースの先頭の名前は一貫していませんが、プロキシを介して処理でき、クロスドメインの問題も解決できます。 アクシオス: // // ベースURL:'' プロキシ: true、 プレフィックス: '/'、 // 資格情報: false、 }, プロキシ: { '/ビジネス': { ターゲット: 'http://xxlb/', パス書き換え: { '^/biz': '/biz/', changeOrigin: true // クロスドメインかどうかを示します} }, '/フロント': { ターゲット: 'http://xxlb/', パス書き換え: { '^/front': '/api/front', changeOrigin: true // クロスドメインかどうかを示します} }, 傍受を要求するアクシオス: // // ベースURL:'' プロキシ: true、 プレフィックス: '/'、 // 資格情報: false、 }, プロキシ: { '/ビジネス': { ターゲット: 'http://xxlb/', パス書き換え: { '^/biz': '/biz/', changeOrigin: true // クロスドメインかどうかを示します} }, '/フロント': { ターゲット: 'http://xxlb/', パス書き換え: { '^/front': '/api/front', changeOrigin: true // クロスドメインかどうかを示します} }, 異なるプレフィックスを持つインターフェースの処理dev はローカル開発環境に使用され、サーバーにデプロイされた場合は使用できません。 定数temp = { API: ['/front/login', 'xxxxxx', 'xxxxx'], api2: ['/test', 'xxxxxx'], xxx: […] } これは、プレフィックスを使用する必要があるすべてのインターフェースを明示的にリストすることと同じです。 これには3つの利点があります。 実稼働環境で他のサーバー インターフェイスを呼び出す必要がある場合は、特定のルールが必要です。ルールがある場合は、ルールを一致させてから変更します。 定数temp = { http://10.0.0.1/api: ['/front/login', 'xxxxxx', 'xxxxx'], http://10.0.0.1/api2: ['/test', 'xxxxxx'], http://10.0.0.1/xxx: […]、 … http://10.0.1.111/api: ['/sth/xxx'] } プレフィックスの範囲を拡張してプロトコルとドメイン名を含める 動的ルーティング構成https://www.nuxtjs.cn/guide/routing nuxt-distは自動的にパッケージ化して設定を生成します リダイレクトと認証権限ミドルウェア 一部のシナリオでは、アクセスするためにログインする必要があります。そうでない場合は、/login ページにリダイレクトされます。処理が完了したので、auth: false を設定して、一部のページがログインにリダイレクトされないように処理できます。たとえば、現在表示されているページでは、登録前にバックグラウンドで登録リンクが生成されます。このページでは、トークン情報は必要ありません。 vue-nuxt ログイン認証の実装に関するこの記事はこれで終わりです。vue-nuxt ログイン認証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: 通知メッセージカルーセルを実装するための CSS3 トランジション
>>: HTMLの水平線注釈とコードコメントの使い方をマスターするだけです
ファイルの保存とアクセスを容易にするために、FTPサービスが特別に構築されています。 FTP サーバ...
公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...
目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...
HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタン...
ここでは Ubuntu 16.04 システムを使用しています。 dockerを使用したインストールh...
Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...
水平スクロールはあらゆる状況に適しているわけではありませんが、適切に行えば、Web サイトを他のサイ...
目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...
Ⅰ. 問題の説明: html+css を使用してシンプルなナビゲーション バーを実装します。 **...
画像プレビュー機能付きのアップロードフォーム、完全なHTMLコードは次のとおりです。 <htm...
1. Linuxグループの基本紹介Linux では、すべてのユーザーはグループに所属する必要があり、...
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...
目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...
概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...
序文mysqlslap は、MySQL サーバーへのクライアント負荷をシミュレートし、各ステージの時...