0

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

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。