Zenn
🍇

FastAPI × JWTで認証付きAPIを作ってVueとつないだ話

に公開
JavaScript
Python
Authentication
JWT
FastAPI
tech

FastAPI × JWTで認証付きAPIを作ってVueとつないだ話

🔹 1. 導入文（エピソード）

最近、近所のパン屋さんで顔なじみの店員さんができた。

最初は「毎朝同じ時間にクロワッサン買う人」として認識されてたっぽいんだけど、ある日ついに言われた。

「いつもこの時間ですね！常連さんですね☺️」

それを聞いてふと思った。

「“認証”って、こういうことかもな」と。

Web開発では、「誰がアクセスしてるか？」を識別する仕組みがとても大事で、それを担うのが**認証（Authentication）**という仕組み。

最近、SNSのフォロワーを可視化するダッシュボードをVue + FastAPIで作っている中で、認証の重要性をひしひしと感じるようになった。

今回はその実体験をベースに、FastAPIでJWTトークン認証を実装してVueとつないだ方法を、つまずきポイント込みで紹介したいと思います。

「このAPI、誰でも叩けちゃうけど大丈夫……？」

SNSのデータ収集やダッシュボード構築をしていると、避けて通れないのが認証・認可の話。

僕も最近、Vueで作ったSNSダッシュボードをFastAPIとつなげて動かしていたんですが、「ユーザー制御なし」ではまずい…！ということで、JWT認証付きAPIの実装に挑戦しました。

この記事では、

  • FastAPIでJWT認証付きAPIを作る方法
  • フロント（Vue）からトークンを使って接続する方法
  • よくつまずいたポイントと解決法

をまとめていきます。

🔹 2. JWT認証の全体像

JWT認証の仕組みをざっくり図解👇

  1. ログイン（/login）で認証（ID+パス）→ JWTを取得
  2. そのトークンを Authorization ヘッダーにつけて各APIにアクセス
  3. サーバー側でJWTを検証 → ユーザー特定 → 処理続行
    📌図は Mermaid や PlantUMLで生成可能。希望あれば作成します。

🔹 3. FastAPI側のコード構成（重要ファイルのみ）

.
├── main.py # エントリーポイント
├── auth.py # JWT生成と検証
├── database.py # ダミーユーザー情報
├── dependencies.py # get_current_user
.

🔹 4. 各ファイルの実装

ここは既にやったことをベースに、main.py, auth.py, database.py, dependencies.py の内容を細かく説明しながら見せていきます（ここは後でMarkdown形式で丸ごと書き出します）。

🔹 5. Vue側の実装：トークンを使ってAPIを呼び出す

const res = await axios.get(`${VITE_API_URL}/metrics`, {
  headers: {
    Authorization: `Bearer ${token}`
  }
})
  • localStorage.setItem('access_token', token) でトークン保存
  • <script setup> での取得タイミングの注意点など

🔹 6. よくあるエラーと対処法（初心者が詰まりがちなポイント）

❌ Invalid token → Bearer のスペース忘れ

❌ 401 Unauthorized → トークンの期限切れ

❌ VueからOPTIONSで飛んで 405 Method Not Allowed → CORSの問題

🔹 7. まとめと次回予告

これで認証付きAPIの「守られた世界」が作れました！

次回は、この認証済みユーザーのデータを Supabase に保存して、
Vueからグラフで見える化していくダッシュボードの構築に入ります💡

おわりに

「このAPI、誰でも叩けちゃうけど大丈夫……？」
そんな不安から始まったJWT認証の実装でしたが、
実際にVueとつないで安全にデータを扱えるようになったことで、開発の自由度も安心感も一気に高まりました。

今後はこの基盤をベースにして、**Supabaseとの連携やSNSダッシュボードの可視化（Chart.js）**も拡張していく予定です！

📦 今回のコードはこちら👇
🔗 GitHubリポジトリ - KPI Dashboard Project

🙌 最後まで読んでいただきありがとうございます！
TwitterやZennでフォローしてもらえると嬉しいです。ご質問や感想もお気軽にどうぞ〜

Discussion