frontend/src/pages/user/UserPage.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="profile-page">
+    <h1>My Profile</h1>
+
+    <div v-if="userStore.user">
+      <p><strong>Name:</strong> {{ userStore.user.name }}</p>
+      <p><strong>Email:</strong> {{ userStore.user.email }}</p>
+      <p><strong>Joined:</strong> {{ new Date(userStore.user.created_at).toLocaleString() }}</p>
+    </div>
+
+    <div v-else>
+      <p>Loading... <b> 読み込み中 </b></p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user'
+import { onMounted } from 'vue'
+
+const userStore = useUserStore()
+
+onMounted(() => {
+  if (!userStore.user) {
+    userStore.fetchUser()
+  }
+})
+
+</script>
+
+<style>
+.profile-page {
+  max-width: 600px;
+  margin: auto;
+}
+</style>
+

frontend/src/router/index.js

@@ -2,6 +2,7 @@ import HomePage from '@/pages/home/HomePage.vue'
 import LoginPage from '@/pages/login/LoginPage.vue'
 import LaravelPage from '@/pages/testing/LaravelPage.vue'
 import WebsocketsPage from '@/pages/testing/WebsocketsPage.vue'
+import UserPage from '@/pages/user/UserPage.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -15,6 +16,10 @@ const router = createRouter({
       path: '/login',
       component: LoginPage,
     },
+    {
+      path: '/user',
+      component: UserPage,
+    },
     {
       path: '/testing',
       children: [

frontend/src/stores/user.js

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    user: null,
+    token: localStorage.getItem('token') || null,
+  }),
+
+  actions: {
+    async fetchUser() {
+      if (!this.token) return
+
+      try {
+        const response = await axios.get('/api/users/me', {
+          headers: {
+            Authorization: `Bearer ${this.token}`
+          }
+        })
+
+        this.user = response.data
+      } catch (error) {
+        console.error("Failed to fetch user")
+      }
+    },
+
+    setToken(token) {
+      this.token = token
+      localStorage.setItem('token', token)
+    },
+
+    logout() {
+      this.token = null
+      this.user = null
+      localStorage.removeItem('token')
+    }
+  }
+})
+