diff --git a/frontend/src/pages/home/HomePage.vue b/frontend/src/pages/home/HomePage.vue index 42f95c7..939fae6 100644 --- a/frontend/src/pages/home/HomePage.vue +++ b/frontend/src/pages/home/HomePage.vue @@ -8,4 +8,4 @@ -` \ No newline at end of file +` diff --git a/frontend/src/pages/user/UserPage.vue b/frontend/src/pages/user/UserPage.vue new file mode 100644 index 0000000..e952503 --- /dev/null +++ b/frontend/src/pages/user/UserPage.vue @@ -0,0 +1,37 @@ + + + My Profile + + + Name: {{ userStore.user.name }} + Email: {{ userStore.user.email }} + Joined: {{ new Date(userStore.user.created_at).toLocaleString() }} + + + + Loading... 読み込み中 + + + + + + + + diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index ee115e2..0c65ab4 100644 --- a/frontend/src/router/index.js +++ b/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: [ diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js new file mode 100644 index 0000000..2a678ea --- /dev/null +++ b/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') + } + } +}) +
Name: {{ userStore.user.name }}
Email: {{ userStore.user.email }}
Joined: {{ new Date(userStore.user.created_at).toLocaleString() }}
Loading... 読み込み中