Vue でフロントエンドとバックエンドの分離を実装するための完全なガイド (axios、jwt)-Vue.js-php.cn

Vue でフロントエンドとバックエンドの分離を実装するための完全なガイド (axios、jwt)

王林

リリース： 2023-06-09 16:06:43

オリジナル

1831 人が閲覧しました

Vue でフロントエンドとバックエンドの分離を実装するための完全なガイド (axios、jwt)

フロントエンドテクノロジの継続的な開発に伴い、フロントエンドとバックエンドの分離がトレンドになっています。 Web開発で。人気のあるフロントエンドフレームワークとして、Vue はバックエンド分離開発手法と完全に一致します。この記事では、Vueをaxiosやjwtと組み合わせてフロントエンドとバックエンドの分離開発を実現する方法とコード例、注意点を紹介します。

1.axios とは何ですか?

axios は、ブラウザーおよび Node.js 用の Promise ベースの HTTP クライアントです。次の利点があります:

Promise API
をサポートするクライアントとサーバーは次のことができます。リクエストとレスポンスのインターセプトをサポートするには
を使用します。リクエストのキャンセルをサポートするには
2. jwt とは何ですか?

jwt (JSON Web Token) は、軽量の認証および認可の標準です。これにより、異なるアプリケーション間で情報を認証する安全な方法が可能になります。 JWT は、ヘッダー、ペイロード、署名の 3 つの部分で構成されます。ヘッダーにはトークンの種類や暗号化アルゴリズムなどの情報が含まれ、ペイロードには送信する必要がありカスタマイズ可能な情報が含まれ、署名はトークンが改ざんされているかどうかを確認するために使用されます。

3. Vue で axios を使用するにはどうすればよいですか?

Vue コンポーネントで axios を使用してデータをリクエストします。手順は次のとおりです:

axios のインストール: npm を使用してインストールできます。コマンドは次のとおりです:

npm install axios --save

axios のインポート: axios を使用する必要があるコンポーネントでは、最初に axios をインポートする必要があります。サンプルコードは次のとおりです:

import axios from 'axios'

リクエストの送信: axios を使用して、次のように HTTP リクエストを送信します:

axios.get(' url')

.then(response =>gt; {

console.log(response.data)
})
.catch(error =>gt; {
console.log(error)
})

ここで、url はリクエストの URL アドレスを表します。then() メソッドはリクエストが成功した後のコールバック関数を表し、渡されたパラメータの応答はサーバーから返されたデータです。 () メソッドはリクエストが失敗した後のコールバック関数を表し、渡されたパラメータ error はエラーメッセージです。

4. 認証に jwt を使用するにはどうすればよいですか?

認証に jwt を使用する場合、まずサーバー側で jwt を生成して検証する必要があります。

jwt の生成

サーバー側では、jsonwebtoken ライブラリを使用して jwt を生成できます。サンプルコードは次のとおりです:

const jwt = require('jsonwebtoken')

const token = jwt.sign({ user: 'username' }, 'secretkey', {expiresIn: '1h' })

このうち、userフィールドはユーザー情報を保存します。secretkey はキーであり、トークンの暗号化に使用されます。expiresIn フィールドはトークンの有効期限を示し、必要に応じて調整できます。

jwt の検証

クライアント側では、サーバーから jwt を取得して検証する必要があります。 jsonwebtoken ライブラリを使用して jwt を検証します。サンプルコードは次のとおりです:

const jwt = require('jsonwebtoken')

const token = 'xxxxx' // サーバーから取得したトークン

try {
const decoded = jwt.verify(token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} catch (err ) {
console.log(err)
}

このうち、トークンはサーバーによって生成されたトークンであり、トークンの有効性を検証するために verify() メソッドが使用されます。、返されたデコードされたオブジェクトには、ユーザー情報、発行時刻 (iat)、および有効期限 (exp) が含まれます。

5. Vue での認証に jwt を使用するにはどうすればよいですか?

Vue での認証に jwt を使用します。手順は次のとおりです:

トークンの取得

ログインに成功した後、サーバーは jwt を転送する必要があります。トークンはクライアントに送信され、クライアントはそれを localStorage または Cookie に保存できます。サンプルコードは次のとおりです。

axios.post('url', { user: 'username', password: 'password' } )

.then(response => {

// ログインに成功し、トークンを localStorage に保存します
localStorage.setItem('token', response.data.token)
})
.catch(error => {
console.log(error)
})

リクエストを送信してトークンを送信します

次の場合に認証が必要ですrequesting インターフェイスを使用する場合、クライアントはリクエストヘッダーにトークンを含める必要があります。サンプルコードは次のとおりです:

axios.get('url', {

headers: { 'Authorization': 'Bearer ' localStorage.getItem( 'token') }

})
.then(response => {
console.log(response.data)
})
.catch( error => {
console.log(error)
})

このうち、Authorization フィールドはリクエストヘッダーのキーワード、Bearer はポリシー名を表します。 Bearer Authentication Scheme を使用し、次の文字列がの localStorage jwt トークンに保存されます。

注:

jwt を認証に使用する場合は、キーの機密性に注意する必要があります。そうしないと、jwt トークンが攻撃者によって改ざんまたは偽造される可能性があります。

Vue で axios を使用する場合は、クロスドメインの問題に注意し、サーバー側で Access-Control-Allow-Origin 応答ヘッダーを設定するか、プロキシを使用して問題を解決する必要があります。
開発環境では、webpack-dev-server を使用してクロスドメインの問題を解決できます。サンプルコードは次のとおりです:
devServer: {

proxy: {

'/api': {
  target: 'http://localhost:3000',
  pathRewrite: { '^/api': '' }
}

ログイン後にコピー

}

このうち、target は対象の URL アドレスを表し、pathRewrite はパス書き換えルールを表します。

この記事では、Vue を axios や jwt と組み合わせてフロントエンドとバックエンドの分離開発を実現するための詳細な手順と注意事項を説明しますので、Web 開発者の参考になれば幸いです。

以上がVue でフロントエンドとバックエンドの分離を実装するための完全なガイド (axios、jwt)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。