Zenn
🦁

Vue x FastAPI x Supabaseでログイン状態管理と複数テーブルデータの可視化を実装した話

に公開
Python 3
FastAPI
Vue 3
Chart.js
Supabase
tech

Vue x FastAPI x Supabaseでログイン状態管理と複数テーブルデータの可視化を実装した話

前回、Vue + Chart.jsでSNSダッシュボードを作った話を書きました。

今回は、

  • 認証管理（JWTベースのログイン機能）
  • 複数テーブル（Instagram、TikTok、X）のデータ取得
  • ログイン状態による表示制御

を取り入れて、さらに使いやすいSNSダッシュボードを作ったのでまとめます。

1. 認証管理（JWTトークン取得・保存）

まずはログイン機能を作成しました。
FastAPIで /token エンドポイントを用意し、正しいユーザー名・パスワードでログインするとJWTトークンを発行します。

Vue側では、

const params = new URLSearchParams()
params.append('username', username.value)
params.append('password', password.value)

const res = await axios.post(`${import.meta.env.VITE_API_URL}/token`, params, {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

const token = res.data.access_token
localStorage.setItem('access_token', token)
isAuthenticated.value = true

のようにして、トークンを保存し、ログイン状態を管理します。

ログアウトも簡単に実装できました。

const logout = () => {
  localStorage.removeItem('access_token')
  isAuthenticated.value = false
}

2. 複数テーブルデータの取得と整理

Supabaseに

  • metrics（総合）
  • tiktok_metrics
  • ig_metrics
  • x_metrics

といったテーブルをそれぞれ用意し、それぞれのテーブルからデータを取得するFastAPIエンドポイントを用意しました。

@router.get("/tiktok_metrics")
def get_tiktok_metrics():
    res = supabase.table("tiktok_metrics").select("*").order("date").execute()
    return res.data

@router.get("/ig_metrics")
def get_ig_metrics():
    res = supabase.table("ig_metrics").select("*").order("date").execute()
    return res.data

@router.get("/x_metrics")
def get_x_metrics():
    res = supabase.table("x_metrics").select("*").order("date").execute()
    return res.data

Vueでは、ログイン後にトークン付きリクエストを投げて各種データを取得し、
それぞれ別のグラフに描画できるよう整理しました。

3. ログイン状態によるUX向上（表示制御）

ログインしていないユーザーには、グラフコンポーネントを見せないようにしています。

<template>
  <div>
    <Login v-if="!isAuthenticated" />
    <ChartComponent v-else />
    <button v-if="isAuthenticated" @click="logout">ログアウト</button>
  </div>
</template>

これにより、

  • 未認証ならログイン画面だけ
  • 認証成功後に初めてグラフが出現

という動きができ、シンプルだけどセキュアな構成になりました。

感想・気づき

今回は認証管理と複数テーブルのデータハンドリングに挑戦しましたが、
フロントエンドから見ると「ログイン状態」と「データ取得・表示制御」が密接に結びついていることを強く感じました。

バックエンドだけでは完結しない、実際の"動くアプリ"ならではの設計ポイントがたくさんありました！

次はさらに、

  • グラフのフィルター機能
  • 期間指定ダッシュボード
  • CSVエクスポート機能

などにチャレンジしていきたいです。

📦 完成コードはこちら👇
GitHub - KPI Dashboard Repo

Discussion