{{message}}
```
### メソッドを作成する
`./frontend/src/App.vue` で、`
```
これは `./auth/AuthService` と `axios` ライブラリから `AuthService` をインポートします。その後、バックエンド サーバーの URL を保留する _API_URL_ 定数を宣言します。
`API_URL` 定数の後、`AuthService` インスタンスを作ります。
```js
const auth = new AuthService()
```
それから auth 定義の下で、アプリケーション コンポーネントを次のように定義していきます。
```js
export default {
name: 'app',
data () {
this.handleAuthentication()
this.authenticated = false
auth.authNotifier.on('authChange', authState => {
this.authenticated = authState.authenticated
})
return {
authenticated: false,
message: ''
}
},
}
```
このコードでは、認証状態を変更するときに `AuthService` によって作成された `authChange` イベントをリッスンします。それからその結果を `authenticated` 変数に割り当てます。また、`message` 変数を空に設定します。この変数は保護されたエンドポイントからの応答を保留します。
最後にすることは、`app` コンポーネントの `methods` プロパティを次のように定義することです。
```js
export default {
// name: 'app',
// data () { ... },
methods: {
// このメソッドは AuthService login() メソッドを呼び出す
login () {
auth.login()
},
handleAuthentication () {
auth.handleAuthentication()
},
logout () {
auth.logout()
},
privateMessage () {
const url = `${API_URL}/api/private/`
return axios.get(url, {headers: {Authorization: `Bearer ${AuthService.getAuthToken()}`}}).then((response) => {
console.log(response.data)
this.message = response.data || ''
})
}
}
}
```
`login()`、`handleAuthentication()`、および `logout()` メソッドは AuthService で対応するメソッドのラッパーです。
`private()` メソッドでは、`axios.get()` メソッドを使って GET 要求を `http://localhost:8000/api/private/` に送ります。このエンドポイントは Auth0 で保護されているので、`Authorization` ヘッダーも追加します。このアクセストークンは `AuthService.getAuthToken()` メソッドを使ってローカル ストレージから取得されました。
## Django、Vue.js、および Auth0 統合をテストする
ここで、すべてが適切に構成されたので、Django、Vue.js、およびAuth0 の統合をテストします。そのためには、プロジェクトのルートディレクトリに戻り、次のコマンドを実行します。
```bash
# 背景で Django を実行する
python manage.py runserver &
# フロントエンド ディレクトリに移動する
cd frontend
# 背景で Vue.js を実行する &
npm run dev &
```
バックエンドとフロントエンドの両方のプロジェクトを実行したら、Vue.js ホームページ ([http://localhost:8080/](http://localhost:8080/)) に移動してテストします。
ホームページには、_ログイン_ ボタンが表示されます。そのボタンをクリックすると、Auth0 ログインページにリダイレクトされます。
認証が終わったら、Vue.js アプリケーションにリダイレクトされ、_プライベートの呼び出し_ と _ログアウト_ ボタンが表示されます。_プライベートの呼び出し_ ボタンをクリックすると、GET 要求がアクセストークンと共に Django フレームワークに発行され、セキュリティメッセージをフェッチします。