Nuxt3とRails APIでログイン認証アプリケーションを作っています。
Nuxt3のpluginsの処理で困っています。
ログイン状態のユーザーがリロードしたとき、piniaストアの認証情報が初期化されてしまいます。
そのため、初期ロード時に発火するpluguinsを自作し、$fetchを使用して、レンダリング前にストアのデータを取得し、piniaストアの認証情報を保持して、かつ正常にユーザーデータが表示も行われるようハイドレーションエラーを防ごうとしています。
RailsへのPOSTは成功しているのですが、Nuxtでログを見ると、VueRouterがapi/v1/auth_token/refreshを永遠にfetchし続けており、他の処理が行えません。
Nuxtにapi/v1/auth_token/refreshは存在しないので、エラーになってしまいます。
VueRouterから除外する方法か、他にこの永遠ループが起きないようにしたいです。
アドバイスよろしくお願いいたします。
自分で調べたこと、わかったこと
①pluginsについて
pluginsはアプリケーションの初期化時に一度のみ実行されます。
これでCookieが存在するユーザーがリロードしたときやサイトを訪れた時、API側に認証情報をpiniaを使ってストアに保存する設計です。
初期化時に取得することでハイドレーションエラーをなくそうとしています。
https://nuxt.com/docs/guide/directory-structure/plugins
①VueRouterのエラーについて
Nuxt3のvuerouterはPages以下を自動的にルーティングします
https://developer.mamezou-tech.com/nuxt/nuxt3-routing/
なぜプラグインのみエラーが起きるのか不明です。
nuxtのデフォルトのポートがlocalhost3000なので、もしかしたらVueRouterがnuxt自身にfetchしたと勘違いしたのかと思いましたが、他のvueファイルでfetchした場合はこのエラーが起きませんので、plugins特有のエラーかと考えました。
もしわかる方がいたら教えて頂けると幸いです🙇
●実装の参考にした資料
リロード対応 | XSSとCSRFに対応するJWTを使ったSPAのログイン認証のベストプラクティスってこれじゃない? - Qiita
#Nuxt3 serverlog
2024-03-07 05:46:45 plugins refreshTokenInit
2024-03-07 05:46:45 [Vue Router warn]: No match found for location with path "/api/v1/auth_token/refresh"
2024-03-07 05:46:45 [Vue Router warn]: No match found for location with path "/api/v1/auth_token/refresh"
2024-03-07 05:46:45 [Vue Router warn]: No match found for location with path "/api/v1/auth_token/refresh"
2024-03-07 05:46:45 global middlewara
2024-03-07 05:46:45 FetchError: [POST] "http://localhost:3000/api/v1/auth_token/refresh": 404 Page not found: /api/v1/auth_token/refresh
2024-03-07 05:46:45 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2024-03-07 05:46:45 at async $fetch2 (file:///app/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15)
2024-03-07 05:46:45 at async refresh (/app/plugins/refreshTokenInit.ts:10:5)
2024-03-07 05:46:45 at async initFunc (/app/plugins/refreshTokenInit.ts:30:22)
#Nuxt3 :app/plugins/refreshTokenInit.ts
import { useAuthStore } from '~~/stores/auth';
//If a cookie refresh token is present on page reload or initial access, set the user to be logged in.
export default defineNuxtPlugin( () =>{
console.log("plugins refreshTokenInit")
const config = useRuntimeConfig()
const auth = useAuthStore();
const refresh = async() =>{
await $fetch(
'http://localhost:3000/api/v1/auth_token/refresh',
{
method:"POST",
credentials: 'include',
body:{},
headers:{
'X-Requested-With': 'XMLHttpRequest',
'Authorization': `Bearer ${auth.auth.token}`,
},
}
).then(response =>{
auth.setAuth(response)
console.log(response)
}).catch(error=>{
console.log(error)
})
}
async function initFunc(){
const response = await refresh()
}
initFunc()
})
DockerCompose
services:
db:
# Use the latest image
image: postgres:16.1-alpine
# Set important environment variables for the database
environment:
TZ: UTC
PGTZ: UTC
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
# Mount host files for container usage
volumes:
- ./api/tmp/db:/var/lib/postgresql/data
api:
# Specify the base Dockerfile for building the image
build:
context: ./api
# Pass environment variables to the Dockerfile
args:
WORKDIR: $WORKDIR
environment:
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
API_DOMAIN: "localhost:$FRONT_PORT"
BASE_URL: "http://localhost:$API_PORT"
# Mount host directory into the container
volumes:
- ./api:/$WORKDIR
# Depend on the db service to ensure it starts first
depends_on:
- db
# Expose ports for the API service
ports:
- "$API_PORT:3000"
tty: true
front:
build:
context: ./front
args:
WORKDIR: $WORKDIR
API_URL: "http://localhost:$API_PORT"
volumes:
# Optimize reading from host to container with caching
- ./front:/app:cached
# Place node_modules volume in the container for optimization
- nuxt_node_modules:/app/node_modules
ports:
- "$FRONT_PORT:3000"
- "24678:24678"
tty: true
environment:
- port=$FRONT_PORT
- CHOKIDAR_USEPOLLING=true
depends_on:
- api
# Start the container with npm
command: sh -c "npm run dev"
volumes:
nuxt_node_modules:
Nuxt 3.10 (port:8080) mode:SSR
Rails 7.1.0 (port:3000)
Docker