feat: 프론트 인증 연동 (소셜 로그인 + Bearer 세션)

- 로그인 화면: 구글(GIS) 버튼 + 애플 버튼 + 개발용 로그인(local)
- 인증 스토어(Pinia): 토큰 복구/로그인/로그아웃, 회원 티어를 광고·매칭 제어에 반영
- HTTP 클라이언트: Authorization Bearer 자동 첨부, 401 시 토큰 폐기 후 로그인 이동
- 라우터 가드: 미로그인 시 보호 경로 → /login (소셜 로그인 전용 앱)
- 헤더 회원 메뉴/로그아웃, 체크인 주체를 로그인 회원으로 전환
- 토큰 localStorage 저장(웹/Capacitor 공용)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-11 08:35:00 +09:00
parent f089ba2dfe
commit 0c538e0658
10 changed files with 352 additions and 9 deletions
+18
View File
@@ -1,10 +1,17 @@
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import MainLayout from '@/layouts/MainLayout.vue'
import { useAuthStore } from '@/stores/auth'
const routes: RouteRecordRaw[] = [
{
path: '/login',
name: 'login',
component: () => import('@/pages/LoginPage.vue'),
},
{
path: '/',
component: MainLayout,
meta: { requiresAuth: true },
children: [
{ path: '', name: 'home', component: () => import('@/pages/HomePage.vue') },
{ path: 'profile', name: 'profile', component: () => import('@/pages/ProfilePage.vue') },
@@ -17,4 +24,15 @@ const router = createRouter({
routes,
})
// 소셜 로그인 전용 앱: 미로그인 시 보호 경로 접근 → 로그인으로
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isAuthenticated) {
return { name: 'login', query: { redirect: to.fullPath } }
}
if (to.name === 'login' && auth.isAuthenticated) {
return { name: 'home' }
}
})
export default router