$30 off During Our Annual Pro Sale. View Details »

chocoZAPサービス予約システムをNuxtで内製化した話

 chocoZAPサービス予約システムをNuxtで内製化した話

■ イベント
2025年10月25日開催
Vue Fes Japan 2025
https://vuefes.jp/2025/

■ セッション情報
2025年10月25日登壇
https://vuefes.jp/2025/timetable

■ 発表者
フロントエンドエンジニア
加藤 かえで

Avatar for RIZAPテクノロジーズ

RIZAPテクノロジーズ

November 25, 2025
Tweet

More Decks by RIZAPテクノロジーズ

Other Decks in Programming

Transcript

  1. 1

  2. 6 工夫ポイント 1 – BFFの役割 – ◼ Rails APIを直接叩かず、Nuxt server

    / apiを経由 ◼ レスポンスをフロント向けに整形 ◼ Railsエンドポイントを外に晒さずセキュリティ向上
  3. 7 工夫ポイント 2 – 認証 (Webの場合) – ◼ Cookieを使用してセッションを確認 セッションがなければログイン画面

    に遷移 ◼ ログイン後、アクセストークンを 取得 ◼ RedisとCookieにユーザー識別子を 保存
  4. 8 工夫ポイント 2 – 認証 (Webviewの場合) – ◼ アプリから送信されるAuthヘッダー を使用

    ◼ ヘッダー内のBearerトークンで認証 ◼ 認証後、RedisとCookieにユーザー 識別子を保存
  5. 11 工夫ポイント 3 – Webviewの苦労話 – ◼ Nuxt内でページ遷移しても、アプリ側からは履歴が存在 しない扱いになっていた ◼

    そのため、アプリの「戻る」操作では履歴なしと判断され、 最初のページに戻ってしまった ◼ アプリの戻るボタンをaddEventListener(‘popstate‘)で検知 ◼ Nuxt側で独自履歴スタックを用意 ◼ 履歴スタックを参照し、router.back()ではなくnavigateTo によって正しいページに遷移できるよう修正 原 因 対 応