Add router-based authentication with route guards

Author: Frederick-S

src/App.vue

@@ -6,13 +6,15 @@
         <v-progress-circular indeterminate size="64" />
       </div>
 
-      <!-- Authentication Screen -->
-      <Auth v-else-if="!user" />
-
-      <!-- Main App (Authenticated) -->
+      <!-- Main App -->
       <v-container v-else class="pa-0 max-w-md mx-auto" fluid>
-        <!-- Header -->
-        <AppHeader :user="user" @logout="handleLogout" @change-password="showPasswordChange = true" />
+        <!-- Header (only show if user is authenticated) -->
+        <AppHeader 
+          v-if="user" 
+          :user="user" 
+          @logout="handleLogout" 
+          @change-password="showPasswordChange = true" 
+        />
 
         <!-- Main Content Area -->
         <div class="content-area">
@@ -22,8 +24,8 @@
           />
         </div>
 
-        <!-- Floating Action Button (only show on home tab) -->
-        <div v-if="$route.name === 'Home'" class="fixed-fab">
+        <!-- Floating Action Button (only show on home tab and if authenticated) -->
+        <div v-if="user && $route.name === 'Home'" class="fixed-fab">
           <v-fab
             location="bottom center"
             size="56"
@@ -33,35 +35,40 @@
           />
         </div>
 
-        <!-- Bottom Navigation -->
-        <BottomNavigation />
+        <!-- Bottom Navigation (only show if authenticated) -->
+        <BottomNavigation v-if="user" />
 
-        <!-- Expense Form Dialog -->
+        <!-- Expense Form Dialog (only show if authenticated) -->
         <ExpenseFormManager 
+          v-if="user"
           v-model="showForm" 
           :expense="editingExpense"
         />
 
-        <!-- Password Change Dialog -->
-        <PasswordChange v-model="showPasswordChange" />
+        <!-- Password Change Dialog (only show if authenticated) -->
+        <PasswordChange 
+          v-if="user"
+          v-model="showPasswordChange" 
+        />
       </v-container>
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { useSupabase } from './composables/useSupabase'
 import { useExpenseManagement } from './composables/useExpenseManagement'
 import AppHeader from './components/AppHeader.vue'
-import Auth from './components/Auth.vue'
 import ExpenseFormManager from './components/ExpenseFormManager.vue'
 import BottomNavigation from './components/BottomNavigation.vue'
 import PasswordChange from './components/PasswordChange.vue'
 import { type Expense } from './types'
 
 const { user, loading, signOut, initAuth } = useSupabase()
 const { refreshTrigger } = useExpenseManagement()
+const router = useRouter()
 
 const showForm = ref(false)
 const showPasswordChange = ref(false)
@@ -74,6 +81,7 @@ onMounted(async () => {
 
 const handleLogout = async () => {
   await signOut()
+  router.push('/login')
 }
 
 // Handle editing an expense

src/components/Auth.vue

@@ -79,8 +79,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { useSupabase } from '@/composables/useSupabase'
 
+const router = useRouter()
 const { signIn, signUp } = useSupabase()
 
 const isLogin = ref(true)
@@ -120,7 +122,11 @@ const handleSubmit = async () => {
 
     if (authError) {
       error.value = authError.message
-    } else if (!isLogin.value) {
+    } else if (isLogin.value) {
+      // Successful login - redirect to home
+      router.push('/')
+    } else {
+      // Successful signup - show message
       successMessage.value = '注册成功！请检查邮箱确认注册。'
     }
   } catch (err) {

src/router/index.ts

@@ -1,23 +1,32 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useSupabase } from '../composables/useSupabase'
 import HomeView from '../components/HomeView.vue'
 import ChartsView from '../components/ChartsView.vue'
+import Auth from '../components/Auth.vue'
 
 const routes = [
   {
     path: '/',
     redirect: '/home'
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: Auth
+  },
   {
     path: '/home',
     name: 'Home',
     component: HomeView,
-    props: true
+    props: true,
+    meta: { requiresAuth: true }
   },
   {
     path: '/charts',
     name: 'Charts',
     component: ChartsView,
-    props: true
+    props: true,
+    meta: { requiresAuth: true }
   }
 ]
 
@@ -26,4 +35,23 @@ const router = createRouter({
   routes
 })
 
+// Route guard for authentication
+router.beforeEach(async (to, from, next) => {
+  const { user, initAuth } = useSupabase()
+  
+  // Initialize auth if not already done
+  if (user.value === undefined) {
+    await initAuth()
+  }
+  
+  // Check if route requires authentication
+  if (to.meta.requiresAuth && !user.value) {
+    next('/login')
+  } else if (to.path === '/login' && user.value) {
+    next('/home')
+  } else {
+    next()
+  }
+})
+
 export default router