From 167c83f7d4eac87c845c8619bc555a968cff824c Mon Sep 17 00:00:00 2001
From: yyc12345 <yyc12321@outlook.com>
Date: Wed, 13 May 2026 12:46:11 +0800
Subject: [PATCH] feat: disable navigation to some pages if there is no user
 logged in

---
 frontend/src/App.vue                         |  2 +-
 frontend/src/router/index.ts                 | 36 ++++++++++++++++----
 frontend/src/stores/{i18n.ts => language.ts} |  0
 frontend/src/views/CalendarEvent.vue         |  8 +++++
 frontend/src/views/Home.vue                  |  8 ++---
 frontend/src/views/Login.vue                 |  8 +++++
 6 files changed, 48 insertions(+), 14 deletions(-)
 rename frontend/src/stores/{i18n.ts => language.ts} (100%)
 create mode 100644 frontend/src/views/CalendarEvent.vue
 create mode 100644 frontend/src/views/Login.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3730023..eed4a81 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useLanguageStore } from './stores/i18n';
+import { useLanguageStore } from './stores/language';
 import { useTokenStore } from './stores/token';
 
 const language = useLanguageStore();
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 6046901..f231986 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,23 +1,29 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useTokenStore } from '@/stores/token'
 
 import Home from '../views/Home.vue'
 import Collection from '@/views/Collection.vue'
 import Calendar from '@/views/Calendar.vue'
+import CalendarEvent from '@/views/CalendarEvent.vue'
 import Todo from '@/views/Todo.vue'
 import Admin from '@/views/Admin.vue'
+import Login from '@/views/Login.vue'
 
 import NotFound from '@/views/NotFound.vue'
 
 const routes = [
-  { path: '/home', component: Home },
-  { path: '/collection', component: Collection },
-  { path: '/calendar', component: Calendar},
-  { path: '/todo', component: Todo},
-  { path: '/admin', component: Admin },
+  { path: '/home', name: "Home", component: Home },
+  { path: '/collection', name: "Collection", meta: { requireLoggedInCheck: true }, component: Collection },
+  { path: '/calendar', name: "Calendar", meta: { requireLoggedInCheck: true }, component: Calendar },
+  { path: '/todo', name: "Todo", meta: { requireLoggedInCheck: true }, component: Todo },
+  { path: '/admin', name: "Admin", meta: { requireLoggedInCheck: true }, component: Admin },
 
-  { path: '/404', component: NotFound },
+  { path: '/calendar/event', name: "CalendarEvent", meta: { requireLoggedInCheck: true }, component: CalendarEvent },
+  { path: '/login', name: "Collection", meta: { requireLoggedOutCheck: true }, component: Login },
 
-  { path: '/', redirect: '/home' },
+  { path: '/404', name: "NotFound", component: NotFound },
+
+  { path: '/', name: "Default", redirect: '/home' },
   { path: '/:pathMatch(.*)*', redirect: '/404' },
 ];
 
@@ -26,4 +32,20 @@ const router = createRouter({
   routes: routes,
 });
 
+router.beforeEach((to, from) => {
+  // Only check for those flagged.
+  const token = useTokenStore();
+  if (to.meta.requireLoggedInCheck) {
+    if (!token.isLoggedIn) {
+      return { name: 'Default', replace: true };
+    }
+  } else if (to.meta.requireLoggedOutCheck) {
+    if (token.isLoggedIn) {
+      return { name: 'Default', replace: true };
+    }
+  } else {
+    return true;
+  }
+})
+
 export default router
diff --git a/frontend/src/stores/i18n.ts b/frontend/src/stores/language.ts
similarity index 100%
rename from frontend/src/stores/i18n.ts
rename to frontend/src/stores/language.ts
diff --git a/frontend/src/views/CalendarEvent.vue b/frontend/src/views/CalendarEvent.vue
new file mode 100644
index 0000000..7cfaba0
--- /dev/null
+++ b/frontend/src/views/CalendarEvent.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is calendar event.</p>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 9f75cb4..840cc97 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="container">
+  <div class="container" style="margin-top: 1.25rem;">
     <article>
       <h1 class="title">coconut-leaf</h1>
       <p>A light, self-host and multi-account calendar system.</p>
@@ -13,8 +13,4 @@
   </div>
 </template>
 
-<style scoped>
-div.container {
-  margin-top: 1.25rem;
-}
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
new file mode 100644
index 0000000..80120e0
--- /dev/null
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is login.</p>
+</template>
+
+<style scoped></style>