@auth0/auth0-vue auth0認証後、IDトークンはいったいどこにあるのか?
どうやら下のようにやると取得できるみたい
auth0.idTokenClaims.value.__raw
Sample.vue
<template>
<div class="grid">
<div class="col-12 md:col-6">
<div class="card p-fluid">
<div class="field">
<h1>Vue 3 Axios Example with</h1>
<button @click="fetchData">Fetch Data</button>
<pre>{{ configrationDocument }}</pre>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useAuth0 } from '@auth0/auth0-vue';
// 非同期の関数を定義
const auth0 = useAuth0();
const data = ref(null);
const fetchData = async () => {
try {
// axiosを使ってデータを取得する例
const params = new URLSearchParams();
params.append('id_token', auth0.idTokenClaims.value.__raw);
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = 'https://localhost:3000';
const response = await axios.post('https://localhost:44363/sample', params);
// レスポンスからデータを取り出す
data.value = response.data;
} catch (error) {
console.error('データの取得に失敗しました:', error);
}
};
</script>
auth0のIDトークンの仕組み的な保存場所はこちら
何もしなかったらインメモリに保存されるみたい
https://mizumotok.hatenablog.jp/entry/2021/08/04/114431
まとめ
どうやったらIDトークン取得できるのか右往左往してた