Nuxt3 動的ルーティングとクエリパラメータの使い方
Nuxt3 Cognito codestate This article describes how to use dynamic routing and query parameters with Nuxt3. If project use Cognito, code state query parameter can cause problems.
by JanitorAug 24, 2023
Nuxt3で動的ルーティングとクエリパラメータの使い方の記事です。使い方自体は特に難しいことはありませんが、CognitoでfederatedSignInを入れようとされている方は注意が必要で、クエリパラメータとして"code"と"state"を使わずに済むのであれば使用しない方がよさそうです。これからNuxt3を使い始める方やCognito認証を入れようとされている方の参考になれば幸いです。
Nuxt3で動的ルーティングとクエリパラメータの使い方の記事です。使い方自体は特に難しいことはありませんが、CognitoでfederatedSignInを入れようとされている方は注意が必要で、クエリパラメータとして"code"と"state"を使わずに済むのであれば使用しない方がよさそうです。これからNuxt3を使い始める方やCognito認証を入れようとされている方の参考になれば幸いです。
Jump Links
1.「pages」フォルダにフォルダを作成
2.「customer」フォルダにvueファイルを作成
3.動作確認
4.おわりに
1.「pages」フォルダにフォルダを作成
1.「pages」フォルダにフォルダを作成
今回の場合は、「pages」フォルダに「customer」というフォルダを作成しています。下の図の場合は、プロジェクト名は「nuxt3Study」です。
今回の場合は、「pages」フォルダに「customer」というフォルダを作成しています。下の図の場合は、プロジェクト名は「nuxt3Study」です。
2.「customer」フォルダにvueファイルを作成
2.「customer」フォルダにvueファイルを作成
customerそれぞれにuuidが割り振られていて、そのuuidを基に、vueファイルでデータを取得して、表示させるようなイメージで作成しています。通常はserver/api内にtsファイルを作成し、データベースなどから情報をクエリして返しますが、今回の場合は、簡単のため固定値としています。
動的ルーティングの値は、ファイル名を「[uuid].vue」としたので、route.params.uuidで取得できます。
クエリパラメータは、myCodeとmyStateを設定するとして、それぞれ、route.query.myCode、route.query.myStateで取得できます。
customerそれぞれにuuidが割り振られていて、そのuuidを基に、vueファイルでデータを取得して、表示させるようなイメージで作成しています。通常はserver/api内にtsファイルを作成し、データベースなどから情報をクエリして返しますが、今回の場合は、簡単のため固定値としています。
動的ルーティングの値は、ファイル名を「[uuid].vue」としたので、route.params.uuidで取得できます。
クエリパラメータは、myCodeとmyStateを設定するとして、それぞれ、route.query.myCode、route.query.myStateで取得できます。
[uuid].vue
<script setup>
import { ref, reactive, watch } from 'vue';
const consoleLogTxt = "customer/[uuid].vue : ";
const route = useRoute();
console.log( consoleLogTxt, "route.params.uuid: ", route.params.uuid );
console.log( consoleLogTxt, "route.params.query.myCode: ", route.query.myCode );
console.log( consoleLogTxt, "route.params.query.myState: ", route.query.myState );
// 以降useFetchなどでuuidをもとに情報取得など（今回は簡単のため固定値）
// var ret = useFetch( '/api/~~~', { method: 'POST', body: route.params.uuid, }, { key: route.params.uuid } );
var ret = reactive( { data: { value: { uuid: route.params.uuid, name: "comytom", address: "2125-1 Oshima, Minobu-cho, Minamikoma-gun, Yamanashi Prefecture" } } } );
</script>
<template>
<VContainer fluid class="fill-height">
<VRow no-gutters class="" align="center" justify="center">
<VCol cols="6" class="">
<VRow no-gutters>
<VCol cols="6">uuid</VCol>
<VCol cols="6">{{ ret.data.value.uuid }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">name</VCol>
<VCol cols="6">{{ ret.data.value.name }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">address</VCol>
<VCol cols="6">{{ ret.data.value.address }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myCode</VCol>
<VCol cols="6">{{ route.query.myCode }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myState</VCol>
<VCol cols="6">{{ route.query.myState }}</VCol>
</VRow>
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
[uuid].vue
<script setup>
import { ref, reactive, watch } from 'vue';
const consoleLogTxt = "customer/[uuid].vue : ";
const route = useRoute();
console.log( consoleLogTxt, "route.params.uuid: ", route.params.uuid );
console.log( consoleLogTxt, "route.params.query.myCode: ", route.query.myCode );
console.log( consoleLogTxt, "route.params.query.myState: ", route.query.myState );
// 以降useFetchなどでuuidをもとに情報取得など（今回は簡単のため固定値）
// var ret = useFetch( '/api/~~~', { method: 'POST', body: route.params.uuid, }, { key: route.params.uuid } );
var ret = reactive( { data: { value: { uuid: route.params.uuid, name: "comytom", address: "2125-1 Oshima, Minobu-cho, Minamikoma-gun, Yamanashi Prefecture" } } } );
</script>
<template>
<VContainer fluid class="fill-height">
<VRow no-gutters class="" align="center" justify="center">
<VCol cols="6" class="">
<VRow no-gutters>
<VCol cols="6">uuid</VCol>
<VCol cols="6">{{ ret.data.value.uuid }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">name</VCol>
<VCol cols="6">{{ ret.data.value.name }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">address</VCol>
<VCol cols="6">{{ ret.data.value.address }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myCode</VCol>
<VCol cols="6">{{ route.query.myCode }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myState</VCol>
<VCol cols="6">{{ route.query.myState }}</VCol>
</VRow>
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
クエリパラメータに"code"と"state"を使用しない方がよさそう、というのは下のURLに詳細が出ています。
https://github.com/aws-amplify/amplify-js/issues/9208
内容としては、クエリパラメータとして"code"が設定されていると、Amplifyがそれを処理してきれいに削除してしまうため問題がでているようです。確かに、以前記載した下記URLの記事でfederatedSignInを実行して、リダイレクトサインインに設定されたURLに戻ってきたときに、"code"と"state"がクエリパラメータとして設定されて来て、しばらく経つとそのクエリパラメータが消えていました。
https://comytom.com/anarticle/c1ef3f1a-5197-4080-bfc2-17f2fc5a7074
解決策があるようですが、避けられるのであればわざわざ自分で"code"と"state"をクエリパラメータとして設定しない方がよさそうです。
クエリパラメータに"code"と"state"を使用しない方がよさそう、というのは下のURLに詳細が出ています。
https://github.com/aws-amplify/amplify-js/issues/9208
内容としては、クエリパラメータとして"code"が設定されていると、Amplifyがそれを処理してきれいに削除してしまうため問題がでているようです。確かに、以前記載した下記URLの記事でfederatedSignInを実行して、リダイレクトサインインに設定されたURLに戻ってきたときに、"code"と"state"がクエリパラメータとして設定されて来て、しばらく経つとそのクエリパラメータが消えていました。
https://comytom.com/anarticle/c1ef3f1a-5197-4080-bfc2-17f2fc5a7074
解決策があるようですが、避けられるのであればわざわざ自分で"code"と"state"をクエリパラメータとして設定しない方がよさそうです。
3.動作確認
3.動作確認
yarn devを実行して「http://localhost:3000/customer/999?myCode=ey~~~~~=&myState=login」にアクセスすると動的ルーティングの値やクエリパラメータの値が表示されます。
yarn devを実行して「http://localhost:3000/customer/999?myCode=ey~~~~~=&myState=login」にアクセスすると動的ルーティングの値やクエリパラメータの値が表示されます。
4.おわりに
4.おわりに
現在進行形のissueは、気持ちが伝わってきます。
現在進行形のissueは、気持ちが伝わってきます。
Nuxt3 動的ルーティングとクエリパラメータの使い方
Nuxt3 Cognito codestate This article describes how to use dynamic routing and query parameters with Nuxt3. If project use Cognito, code state query parameter can cause problems.
by JanitorAug 24, 2023
Nuxt3で動的ルーティングとクエリパラメータの使い方の記事です。使い方自体は特に難しいことはありませんが、CognitoでfederatedSignInを入れようとされている方は注意が必要で、クエリパラメータとして"code"と"state"を使わずに済むのであれば使用しない方がよさそうです。これからNuxt3を使い始める方やCognito認証を入れようとされている方の参考になれば幸いです。
Nuxt3で動的ルーティングとクエリパラメータの使い方の記事です。使い方自体は特に難しいことはありませんが、CognitoでfederatedSignInを入れようとされている方は注意が必要で、クエリパラメータとして"code"と"state"を使わずに済むのであれば使用しない方がよさそうです。これからNuxt3を使い始める方やCognito認証を入れようとされている方の参考になれば幸いです。
Jump Links
1.「pages」フォルダにフォルダを作成
2.「customer」フォルダにvueファイルを作成
3.動作確認
4.おわりに
1.「pages」フォルダにフォルダを作成
1.「pages」フォルダにフォルダを作成
今回の場合は、「pages」フォルダに「customer」というフォルダを作成しています。下の図の場合は、プロジェクト名は「nuxt3Study」です。
今回の場合は、「pages」フォルダに「customer」というフォルダを作成しています。下の図の場合は、プロジェクト名は「nuxt3Study」です。
2.「customer」フォルダにvueファイルを作成
2.「customer」フォルダにvueファイルを作成
customerそれぞれにuuidが割り振られていて、そのuuidを基に、vueファイルでデータを取得して、表示させるようなイメージで作成しています。通常はserver/api内にtsファイルを作成し、データベースなどから情報をクエリして返しますが、今回の場合は、簡単のため固定値としています。
動的ルーティングの値は、ファイル名を「[uuid].vue」としたので、route.params.uuidで取得できます。
クエリパラメータは、myCodeとmyStateを設定するとして、それぞれ、route.query.myCode、route.query.myStateで取得できます。
customerそれぞれにuuidが割り振られていて、そのuuidを基に、vueファイルでデータを取得して、表示させるようなイメージで作成しています。通常はserver/api内にtsファイルを作成し、データベースなどから情報をクエリして返しますが、今回の場合は、簡単のため固定値としています。
動的ルーティングの値は、ファイル名を「[uuid].vue」としたので、route.params.uuidで取得できます。
クエリパラメータは、myCodeとmyStateを設定するとして、それぞれ、route.query.myCode、route.query.myStateで取得できます。
[uuid].vue
<script setup>
import { ref, reactive, watch } from 'vue';
const consoleLogTxt = "customer/[uuid].vue : ";
const route = useRoute();
console.log( consoleLogTxt, "route.params.uuid: ", route.params.uuid );
console.log( consoleLogTxt, "route.params.query.myCode: ", route.query.myCode );
console.log( consoleLogTxt, "route.params.query.myState: ", route.query.myState );
// 以降useFetchなどでuuidをもとに情報取得など（今回は簡単のため固定値）
// var ret = useFetch( '/api/~~~', { method: 'POST', body: route.params.uuid, }, { key: route.params.uuid } );
var ret = reactive( { data: { value: { uuid: route.params.uuid, name: "comytom", address: "2125-1 Oshima, Minobu-cho, Minamikoma-gun, Yamanashi Prefecture" } } } );
</script>
<template>
<VContainer fluid class="fill-height">
<VRow no-gutters class="" align="center" justify="center">
<VCol cols="6" class="">
<VRow no-gutters>
<VCol cols="6">uuid</VCol>
<VCol cols="6">{{ ret.data.value.uuid }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">name</VCol>
<VCol cols="6">{{ ret.data.value.name }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">address</VCol>
<VCol cols="6">{{ ret.data.value.address }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myCode</VCol>
<VCol cols="6">{{ route.query.myCode }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myState</VCol>
<VCol cols="6">{{ route.query.myState }}</VCol>
</VRow>
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
[uuid].vue
<script setup>
import { ref, reactive, watch } from 'vue';
const consoleLogTxt = "customer/[uuid].vue : ";
const route = useRoute();
console.log( consoleLogTxt, "route.params.uuid: ", route.params.uuid );
console.log( consoleLogTxt, "route.params.query.myCode: ", route.query.myCode );
console.log( consoleLogTxt, "route.params.query.myState: ", route.query.myState );
// 以降useFetchなどでuuidをもとに情報取得など（今回は簡単のため固定値）
// var ret = useFetch( '/api/~~~', { method: 'POST', body: route.params.uuid, }, { key: route.params.uuid } );
var ret = reactive( { data: { value: { uuid: route.params.uuid, name: "comytom", address: "2125-1 Oshima, Minobu-cho, Minamikoma-gun, Yamanashi Prefecture" } } } );
</script>
<template>
<VContainer fluid class="fill-height">
<VRow no-gutters class="" align="center" justify="center">
<VCol cols="6" class="">
<VRow no-gutters>
<VCol cols="6">uuid</VCol>
<VCol cols="6">{{ ret.data.value.uuid }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">name</VCol>
<VCol cols="6">{{ ret.data.value.name }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">address</VCol>
<VCol cols="6">{{ ret.data.value.address }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myCode</VCol>
<VCol cols="6">{{ route.query.myCode }}</VCol>
</VRow>
<VRow no-gutters>
<VCol cols="6">myState</VCol>
<VCol cols="6">{{ route.query.myState }}</VCol>
</VRow>
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
クエリパラメータに"code"と"state"を使用しない方がよさそう、というのは下のURLに詳細が出ています。
https://github.com/aws-amplify/amplify-js/issues/9208
内容としては、クエリパラメータとして"code"が設定されていると、Amplifyがそれを処理してきれいに削除してしまうため問題がでているようです。確かに、以前記載した下記URLの記事でfederatedSignInを実行して、リダイレクトサインインに設定されたURLに戻ってきたときに、"code"と"state"がクエリパラメータとして設定されて来て、しばらく経つとそのクエリパラメータが消えていました。
https://comytom.com/anarticle/c1ef3f1a-5197-4080-bfc2-17f2fc5a7074
解決策があるようですが、避けられるのであればわざわざ自分で"code"と"state"をクエリパラメータとして設定しない方がよさそうです。
クエリパラメータに"code"と"state"を使用しない方がよさそう、というのは下のURLに詳細が出ています。
https://github.com/aws-amplify/amplify-js/issues/9208
内容としては、クエリパラメータとして"code"が設定されていると、Amplifyがそれを処理してきれいに削除してしまうため問題がでているようです。確かに、以前記載した下記URLの記事でfederatedSignInを実行して、リダイレクトサインインに設定されたURLに戻ってきたときに、"code"と"state"がクエリパラメータとして設定されて来て、しばらく経つとそのクエリパラメータが消えていました。
https://comytom.com/anarticle/c1ef3f1a-5197-4080-bfc2-17f2fc5a7074
解決策があるようですが、避けられるのであればわざわざ自分で"code"と"state"をクエリパラメータとして設定しない方がよさそうです。
3.動作確認
3.動作確認
yarn devを実行して「http://localhost:3000/customer/999?myCode=ey~~~~~=&myState=login」にアクセスすると動的ルーティングの値やクエリパラメータの値が表示されます。
yarn devを実行して「http://localhost:3000/customer/999?myCode=ey~~~~~=&myState=login」にアクセスすると動的ルーティングの値やクエリパラメータの値が表示されます。
4.おわりに
4.おわりに
現在進行形のissueは、気持ちが伝わってきます。
現在進行形のissueは、気持ちが伝わってきます。