diff --git a/components/article/Category.vue b/components/article/Category.vue
index 20019aa..ba30fe2 100644
--- a/components/article/Category.vue
+++ b/components/article/Category.vue
@@ -9,9 +9,11 @@ const props = defineProps<{
   index: number
 }>()
 
-const { data: articleData } = await useAsyncData(`articles-by-category-${props.category.name}`, () => $fetch('/api/articles/list', {
+const { data } = await useFetch('/api/articles/list', {
   query: { category: props.category.name, page: 1, pageSize: 6 },
-}))
+})
+
+const articleData = computed(() => data.value ? data.value.payload : [])
 
 const isFlipped = ref(false)
 
diff --git a/components/article/Main.vue b/components/article/Main.vue
index f1d8a3c..ad3b726 100644
--- a/components/article/Main.vue
+++ b/components/article/Main.vue
@@ -44,9 +44,19 @@ const displayCols = computed(() => {
 const page = ref(Number(route.query.page) || 1)
 const pageSize = ref(6)
 
-const { data: total } = await useAsyncData(`article-count-${props.type}`, () => $fetch('/api/articles/count', { query: whereObj.value }))
+const { data: fetchedTotal } = await useAsyncData(`articles-count-${props.type}`, () => $fetch('/api/articles/count', {
+  query: whereObj.value,
+}), { watch: [whereObj] })
+const total = computed(() => fetchedTotal.value ? fetchedTotal.value.payload ?? 0 : 0)
 
-const { data: articleData } = await useAsyncData(`articles-by-page-${props.type}`, () => $fetch('/api/articles/list', { query: { page: page.value, pageSize: pageSize.value, ...whereObj.value } }), { watch: [query] })
+const { data: fetchedArticleData } = await useAsyncData(`articles-list-${props.type}`, () => $fetch('/api/articles/list', {
+  query: {
+    page: page.value,
+    pageSize: pageSize.value,
+    ...whereObj.value,
+  },
+}), { watch: [page, pageSize, whereObj] })
+const articleData = computed(() => fetchedArticleData.value ? fetchedArticleData.value.payload ?? [] : [])
 
 watch(page, async (newPage) => {
   router.replace({ query: { ...route.query, page: newPage.toString() } })
@@ -60,7 +70,7 @@ watch(() => route.query.page, (pageQuery) => {
 })
 
 const articleCards = computed<ArticleCardProps[]>(() =>
-  articleData.value?.map((article) => {
+  articleData.value.map((article) => {
     return {
       to: article.to,
       title: article.title,
@@ -71,7 +81,7 @@ const articleCards = computed<ArticleCardProps[]>(() =>
       editedAt: article.editedAt,
       wordCount: article.wordCount,
     }
-  }) || [],
+  }),
 )
 </script>
 
@@ -83,7 +93,7 @@ const articleCards = computed<ArticleCardProps[]>(() =>
       </div>
     </div>
     <div class="sticky bottom-5 mx-auto mt-5 w-fit">
-      <HanaPaginator v-model="page" :total="total ?? 0" />
+      <HanaPaginator v-model="page" :total="total" />
     </div>
   </div>
 </template>
diff --git a/components/main/Body.vue b/components/main/Body.vue
index c0bd097..2c65548 100644
--- a/components/main/Body.vue
+++ b/components/main/Body.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { ArticleCardProps } from '~/types/article'
 
-const { data } = await useAsyncData('recent-articles', () => $fetch('/api/articles/list', { query: { page: 1, pageSize: 6 } }))
+const { data: fetchArticleData } = await useFetch('/api/articles/list', { query: { page: 1, pageSize: 6 } })
+const articleData = computed(() => fetchArticleData.value ? fetchArticleData.value.payload ?? [] : [])
 
 const articleCards = computed<ArticleCardProps[]>(() =>
-  data.value?.map((article) => {
+  articleData.value.map((article) => {
     return {
       to: article.to,
       title: article.title,
@@ -15,7 +16,7 @@ const articleCards = computed<ArticleCardProps[]>(() =>
       editedAt: article.editedAt,
       wordCount: article.wordCount,
     }
-  }) || [],
+  }),
 )
 </script>
 
diff --git a/components/main/Header/index.vue b/components/main/Header/index.vue
index d7cc380..16e08d9 100644
--- a/components/main/Header/index.vue
+++ b/components/main/Header/index.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useStore } from '~/store'
+
 const { t } = useI18n()
 
 const { routesMap } = useRoutesMap()
+const { userStore } = useStore()
 
 const notLoggedInMap = [{
   text: t('header.user.notLoggedIn.login'),
@@ -58,18 +61,26 @@ function handleUserCommand(command: string | number | object) {
   }
 }
 
-function handleSubmit(type: 'login' | 'register', e: Event) {
+async function handleSubmit(type: 'login' | 'register', e: Event) {
   switch (type) {
     case 'login':
       if (e.target) {
         const formData = new FormData(e.target as HTMLFormElement)
-        console.log(Object.fromEntries(formData))
+        const { data } = await useFetch('/api/auth/login', { method: 'POST', body: JSON.stringify(Object.fromEntries(formData)) })
+        if (data.value?.success) {
+          localStorage.setItem('token', data.value.payload!.token)
+          userStore.setUserInfo(data.value.payload!.userInfo)
+          loginWindowVisible.value = false
+        }
       }
       break
     case 'register':
       if (e.target) {
         const formData = new FormData(e.target as HTMLFormElement)
-        console.log(Object.fromEntries(formData))
+        const { data } = useFetch('/api/auth/register', { method: 'POST', body: JSON.stringify(Object.fromEntries(formData)) })
+        if (data.value?.success) {
+          loginWindowVisible.value = true
+        }
       }
       break
   }
@@ -141,7 +152,7 @@ onUnmounted(() => {
           class="ml-auto"
           @click="changeMode"
         />
-        <HanaDropdown animation="slide" offset="end" :show-arrow="false" @command="handleUserCommand">
+        <HanaDropdown v-if="!userStore.loggedIn" animation="slide" offset="end" :show-arrow="false" @command="handleUserCommand">
           <HanaButton
             icon-button
             icon="lucide:user-round"
@@ -160,6 +171,24 @@ onUnmounted(() => {
             </HanaDropdownMenu>
           </template>
         </HanaDropdown>
+        <HanaDropdown v-if="userStore.loggedIn" animation="slide" offset="end" :show-arrow="false" @command="handleUserCommand">
+          <NuxtImg v-if="userStore.userInfo!.avatar" :src="userStore.userInfo!.avatar" class="size-8 cursor-pointer rounded-full" />
+          <div v-else class="size-8 cursor-pointer rounded-full bg-hana-blue text-center text-2xl text-white">
+            <span>{{ userStore.userInfo!.username[0] }}</span>
+          </div>
+          <template #dropdown>
+            <HanaDropdownMenu>
+              <HanaDropdownItem
+                v-for="item in loggedInMap"
+                :key="item.text"
+                :icon="item.icon"
+                :command="item.text"
+              >
+                {{ item.text }}
+              </HanaDropdownItem>
+            </HanaDropdownMenu>
+          </template>
+        </HanaDropdown>
       </div>
     </div>
   </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d1f71a3..61cc972 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -92,6 +92,7 @@ export default defineNuxtConfig({
     '@nuxtjs/seo',
     '@vueuse/nuxt',
     '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt',
   ],
   plugins: ['~/plugins/directives.ts'],
   devtools: { enabled: true },
diff --git a/package.json b/package.json
index ffce2de..0c6326a 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/bcrypt": "^5.0.2",
     "@types/express-session": "^1.18.0",
+    "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^22.7.4",
     "@types/vivus": "^0.4.7",
     "@vueuse/core": "^11.1.0",
@@ -51,8 +52,10 @@
     "eslint-plugin-tailwindcss": "^3.17.4",
     "express-session": "^1.18.1",
     "gsap": "^3.12.5",
+    "jsonwebtoken": "^9.0.2",
     "nuxt-lodash": "^2.5.3",
     "pinia": "^2.2.5",
+    "pinia-plugin-persistedstate": "^4.1.3",
     "prisma": "5.22.0",
     "sass": "^1.79.4",
     "sharp": "^0.33.5",
diff --git a/pages/articles/archives/index.vue b/pages/articles/archives/index.vue
index 819702e..4a5d9bf 100644
--- a/pages/articles/archives/index.vue
+++ b/pages/articles/archives/index.vue
@@ -7,9 +7,12 @@ const route = useRoute()
 const router = useRouter()
 
 // 文章总数
-const { data: count } = await useAsyncData('article-count', () => $fetch('/api/articles/count'))
+const { data: fetchedCount } = await useFetch('/api/articles/count')
+const count = computed(() => fetchedCount.value ? fetchedCount.value.payload ?? 0 : 0)
+
 // 文章日期，key 为年份，value 为该年份下的月份数组
-const { data: dateMap } = await useAsyncData('articles-by-publishedAt', () => $fetch('/api/articles/dates'))
+const { data: fetchedDataMap } = await useFetch('/api/articles/dates')
+const dateMap = computed(() => fetchedDataMap.value ? fetchedDataMap.value.payload : null)
 
 const yearList = computed(() =>
   dateMap.value ? Object.keys(dateMap.value).sort((a, b) => Number(b) - Number(a)) : [],
diff --git a/pages/articles/categories/index.vue b/pages/articles/categories/index.vue
index bf817c5..a4646d2 100644
--- a/pages/articles/categories/index.vue
+++ b/pages/articles/categories/index.vue
@@ -3,9 +3,9 @@ definePageMeta({
   name: 'categories',
 })
 
-const { data } = await useAsyncData('article-categories', () => $fetch('/api/categories/list'))
+const { data: fetchedCategories } = await useFetch('/api/categories/list')
 
-const categories = computed(() => data.value || [])
+const categories = computed(() => fetchedCategories.value ? fetchedCategories.value.payload ?? [] : [])
 </script>
 
 <template>
diff --git a/pages/articles/tags/index.vue b/pages/articles/tags/index.vue
index 53f1e76..299e172 100644
--- a/pages/articles/tags/index.vue
+++ b/pages/articles/tags/index.vue
@@ -3,9 +3,9 @@ definePageMeta({
   name: 'tags',
 })
 
-const { data } = await useAsyncData('article-tags', () => $fetch('/api/tags/list'))
+const { data: fetchedTags } = await useFetch('/api/tags/list')
 
-const tags = computed(() => data.value || [])
+const tags = computed(() => fetchedTags.value ? fetchedTags.value.payload ?? [] : [])
 </script>
 
 <template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35aa09d..0e97066 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,9 @@ importers:
       '@types/express-session':
         specifier: ^1.18.0
         version: 1.18.0
+      '@types/jsonwebtoken':
+        specifier: ^9.0.7
+        version: 9.0.7
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -111,12 +114,18 @@ importers:
       gsap:
         specifier: ^3.12.5
         version: 3.12.5
+      jsonwebtoken:
+        specifier: ^9.0.2
+        version: 9.0.2
       nuxt-lodash:
         specifier: ^2.5.3
         version: 2.5.3(magicast@0.3.5)(rollup@4.24.0)
       pinia:
         specifier: ^2.2.5
         version: 2.2.5(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4))
+      pinia-plugin-persistedstate:
+        specifier: ^4.1.3
+        version: 4.1.3(@pinia/nuxt@0.6.1(magicast@0.3.5)(rollup@4.24.0)(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4)))(magicast@0.3.5)(pinia@2.2.5(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4)))(rollup@4.24.0)
       prisma:
         specifier: 5.22.0
         version: 5.22.0
@@ -1723,6 +1732,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/jsonwebtoken@9.0.7':
+    resolution: {integrity: sha512-ugo316mmTYBl2g81zDFnZ7cfxlut3o+/EQdaP7J8QN2kY6lJ22hmQYCK5EHcJHbrW+dkCGSCPgbG8JtYj6qSrg==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
@@ -2254,6 +2266,9 @@ packages:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
 
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -2684,6 +2699,9 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  deep-pick-omit@1.2.1:
+    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -2796,6 +2814,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -3741,6 +3762,16 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jsonwebtoken@9.0.2:
+    resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  jwa@1.4.1:
+    resolution: {integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==}
+
+  jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+
   keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
     engines: {node: '>= 0.6'}
@@ -3834,18 +3865,36 @@ packages:
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -4496,6 +4545,17 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pinia-plugin-persistedstate@4.1.3:
+    resolution: {integrity: sha512-5Rad7oSoEh0na+j4jEViVQMtAYE38KjU7ixKc+am33QX/clJ1mb19zTZqMJXvq+PnQW7uuEuL33Q6NL0GbkfWw==}
+    peerDependencies:
+      '@pinia/nuxt': '>=0.5.0'
+      pinia: '>=2.0.0'
+    peerDependenciesMeta:
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+
   pinia@2.2.5:
     resolution: {integrity: sha512-T4PEQ4uFv2KIRC8A1Y3k1ceQGTDtxtd7nngYGu1IJUUSpuQoYfGq7w7rOc+f5YN1vx3mEs2NjjtN2IFbNS7jqA==}
     peerDependencies:
@@ -7798,6 +7858,10 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/jsonwebtoken@9.0.7':
+    dependencies:
+      '@types/node': 22.7.4
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.12
@@ -8503,6 +8567,8 @@ snapshots:
 
   buffer-crc32@1.0.0: {}
 
+  buffer-equal-constant-time@1.0.1: {}
+
   buffer-from@1.1.2: {}
 
   buffer@5.7.1:
@@ -8920,6 +8986,8 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  deep-pick-omit@1.2.1: {}
+
   deepmerge@4.3.1: {}
 
   default-browser-id@5.0.0: {}
@@ -9003,6 +9071,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.32: {}
@@ -10180,6 +10252,30 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jsonwebtoken@9.0.2:
+    dependencies:
+      jws: 3.2.2
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 7.6.3
+
+  jwa@1.4.1:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@3.2.2:
+    dependencies:
+      jwa: 1.4.1
+      safe-buffer: 5.2.1
+
   keygrip@1.1.0:
     dependencies:
       tsscmp: 1.0.6
@@ -10318,14 +10414,26 @@ snapshots:
 
   lodash.defaults@4.2.0: {}
 
+  lodash.includes@4.3.0: {}
+
   lodash.isarguments@3.1.0: {}
 
+  lodash.isboolean@3.0.3: {}
+
+  lodash.isinteger@4.0.4: {}
+
+  lodash.isnumber@3.0.3: {}
+
   lodash.isplainobject@4.0.6: {}
 
+  lodash.isstring@4.0.1: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
+  lodash.once@4.1.1: {}
+
   lodash.uniq@4.5.0: {}
 
   lodash@4.17.21: {}
@@ -11424,6 +11532,21 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pinia-plugin-persistedstate@4.1.3(@pinia/nuxt@0.6.1(magicast@0.3.5)(rollup@4.24.0)(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4)))(magicast@0.3.5)(pinia@2.2.5(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4)))(rollup@4.24.0):
+    dependencies:
+      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
+      deep-pick-omit: 1.2.1
+      defu: 6.1.4
+      destr: 2.0.3
+    optionalDependencies:
+      '@pinia/nuxt': 0.6.1(magicast@0.3.5)(rollup@4.24.0)(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4))
+      pinia: 2.2.5(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4))
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+      - webpack-sources
+
   pinia@2.2.5(typescript@5.5.4)(vue@3.5.11(typescript@5.5.4)):
     dependencies:
       '@vue/devtools-api': 6.6.4
diff --git a/prisma/migrations/20241123071453_/migration.sql b/prisma/migrations/20241123071453_/migration.sql
new file mode 100644
index 0000000..9a69639
--- /dev/null
+++ b/prisma/migrations/20241123071453_/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Made the column `username` on table `User` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- AlterTable
+ALTER TABLE "User" ALTER COLUMN "username" SET NOT NULL;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index fea18be..209d0e5 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -47,7 +47,7 @@ model Category {
 model User {
   id       Int       @id @default(autoincrement())
   email    String    @unique
-  username String?   @unique
+  username String    @unique
   password String
   site     String?
   avatar   String?
diff --git a/server/api/articles/count.get.ts b/server/api/articles/count.get.ts
index bcf9cbe..49cb54c 100644
--- a/server/api/articles/count.get.ts
+++ b/server/api/articles/count.get.ts
@@ -1,6 +1,7 @@
 import type * as p from '@prisma/client'
 import prisma from '~/lib/prisma'
 import type { ArticleCountQuery } from '~/server/types/articles'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
 type Options = p.Prisma.ArticleWhereInput & { publishedAtMonth?: string }
 
@@ -14,7 +15,7 @@ async function selectArticleCount(options: Options) {
   return await prisma.article.count({ where: rest })
 }
 
-export default defineEventHandler(async (event) => {
+export default formattedEventHandler(async (event) => {
   const query = getQuery(event) as ArticleCountQuery
   const tagName = query.tag as string | undefined
   const categoryName = query.category as string | undefined
@@ -32,5 +33,5 @@ export default defineEventHandler(async (event) => {
   }
 
   const count = await selectArticleCount(options)
-  return count
+  return { payload: count }
 })
diff --git a/server/api/articles/dates.get.ts b/server/api/articles/dates.get.ts
index 56408ee..edcb6ab 100644
--- a/server/api/articles/dates.get.ts
+++ b/server/api/articles/dates.get.ts
@@ -1,4 +1,5 @@
 import prisma from '~/lib/prisma'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
 async function getDates(): Promise<Record<string, string[]>> {
   const articles = await prisma.article.findMany({
@@ -20,7 +21,7 @@ async function getDates(): Promise<Record<string, string[]>> {
   return result
 }
 
-export default defineEventHandler(async () => {
+export default formattedEventHandler(async () => {
   const dates = await getDates()
-  return dates
+  return { payload: dates }
 })
diff --git a/server/api/articles/list.get.ts b/server/api/articles/list.get.ts
index b43bbb4..e408ea9 100644
--- a/server/api/articles/list.get.ts
+++ b/server/api/articles/list.get.ts
@@ -1,6 +1,7 @@
 import type * as p from '@prisma/client'
 import prisma from '~/lib/prisma'
 import type { ArticleListQuery } from '~/server/types/articles'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
 type Options = p.Prisma.ArticleWhereInput
   & {
@@ -32,7 +33,7 @@ async function selectArticleList(options: Options) {
   return result
 }
 
-export default defineEventHandler(async (event) => {
+export default formattedEventHandler(async (event) => {
   const query = getQuery(event) as ArticleListQuery
   const page = Number.parseInt(query.page as string) || 1
   const pageSize = Number.parseInt(query.pageSize as string) || 6
@@ -55,5 +56,5 @@ export default defineEventHandler(async (event) => {
   }
 
   const articles = await selectArticleList(options)
-  return articles
+  return { payload: articles }
 })
diff --git a/server/api/articles/refresh.post.ts b/server/api/articles/refresh.post.ts
index c1f9c90..04d79b8 100644
--- a/server/api/articles/refresh.post.ts
+++ b/server/api/articles/refresh.post.ts
@@ -1,6 +1,7 @@
 import type { ParsedContent } from '@nuxt/content'
 import type * as p from '@prisma/client'
 import prisma from '~/lib/prisma'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 import { flatStr } from '~/utils/handleStr'
 
 // 从 Nuxt Content 中获取文章数据
@@ -171,15 +172,7 @@ async function handleArticles(articles: ParsedContent[]) {
   ])
 }
 
-export default defineEventHandler(async () => {
-  try {
-    // 获取文章数据
-    const articles = await getNuxtContent()
-    // 处理文章数据
-    await handleArticles(articles)
-    return { message: 'Refreshed articles' }
-  }
-  catch (error: any) {
-    return { message: error.message || 'Failed to refresh articles' }
-  }
+export default formattedEventHandler(async () => {
+  const articles = await getNuxtContent()
+  await handleArticles(articles)
 })
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index f2ba9ef..1f57592 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -1,8 +1,12 @@
 import bcrypt from 'bcrypt'
+import jwt from 'jsonwebtoken'
 import { z } from 'zod'
 import prisma from '~/lib/prisma'
+import env from '~/server/env/dotenv'
+import type { JwtPayload } from '~/server/types/jwt'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
-export default defineEventHandler(async (event) => {
+export default formattedEventHandler(async (event) => {
   const body = await readBody(event)
   const { account, password } = body
 
@@ -26,8 +30,7 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  const session = event.context.session
-  session.user = {
+  const userInfo: JwtPayload = {
     id: user.id,
     email: user.email,
     username: user.username,
@@ -35,5 +38,9 @@ export default defineEventHandler(async (event) => {
     site: user.site,
   }
 
-  return 'Login successful'
+  const token = jwt.sign(userInfo, env.HANA_JWT_SECRET!, {
+    expiresIn: '30d',
+  })
+
+  return { payload: { token, userInfo } }
 })
diff --git a/server/api/auth/register.post.ts b/server/api/auth/register.post.ts
index f4ab243..5c46e2b 100644
--- a/server/api/auth/register.post.ts
+++ b/server/api/auth/register.post.ts
@@ -2,6 +2,7 @@ import bcrypt from 'bcrypt'
 import { z } from 'zod'
 import prisma from '~/lib/prisma'
 import { useZodVerify } from '~/server/composables/useZodVerify'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
 const verifySchema = z.object({
   username: z.string().min(1, { message: 'Username must not be empty' }).max(16, { message: 'Username must not exceed 16 characters' }),
@@ -10,7 +11,7 @@ const verifySchema = z.object({
   password: z.string().min(8, { message: 'Password must be at least 8 characters' }).max(32, { message: 'Password must not exceed 32 characters' }),
 })
 
-export default defineEventHandler(async (event) => {
+export default formattedEventHandler(async (event) => {
   const body = await readBody(event)
 
   const { success, errorList, result } = useZodVerify(verifySchema, body)
@@ -47,6 +48,4 @@ export default defineEventHandler(async (event) => {
       password: hashedPassword,
     },
   })
-
-  return 'User created successfully'
 })
diff --git a/server/api/categories/list.get.ts b/server/api/categories/list.get.ts
index 20c57f9..c9fb284 100644
--- a/server/api/categories/list.get.ts
+++ b/server/api/categories/list.get.ts
@@ -1,11 +1,12 @@
 import prisma from '~/lib/prisma'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
 async function getCategories() {
   const categories = await prisma.category.findMany()
   return categories
 }
 
-export default defineEventHandler(async () => {
+export default formattedEventHandler(async () => {
   const categories = await getCategories()
-  return categories
+  return { payload: categories }
 })
diff --git a/server/api/messages/list.get.ts b/server/api/messages/list.get.ts
index d1a6900..ff593ab 100644
--- a/server/api/messages/list.get.ts
+++ b/server/api/messages/list.get.ts
@@ -1 +1,5 @@
-export default defineEventHandler(async () => {})
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
+
+export default formattedEventHandler(async () => {
+  return { payload: [] }
+})
diff --git a/server/api/messages/post.post.ts b/server/api/messages/post.post.ts
index d1a6900..ff593ab 100644
--- a/server/api/messages/post.post.ts
+++ b/server/api/messages/post.post.ts
@@ -1 +1,5 @@
-export default defineEventHandler(async () => {})
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
+
+export default formattedEventHandler(async () => {
+  return { payload: [] }
+})
diff --git a/server/api/tags/list.get.ts b/server/api/tags/list.get.ts
index 4972b99..e3581bd 100644
--- a/server/api/tags/list.get.ts
+++ b/server/api/tags/list.get.ts
@@ -1,11 +1,12 @@
 import prisma from '~/lib/prisma'
+import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
 
 async function getTags() {
   const tags = await prisma.tag.findMany()
   return tags.map(({ name, articleCount }) => ({ name, count: articleCount }))
 }
 
-export default defineEventHandler(async () => {
+export default formattedEventHandler(async () => {
   const tags = await getTags()
-  return tags
+  return { payload: tags }
 })
diff --git a/server/middleware/auth.ts b/server/middleware/auth.ts
new file mode 100644
index 0000000..ed0ec72
--- /dev/null
+++ b/server/middleware/auth.ts
@@ -0,0 +1,30 @@
+import jwt from 'jsonwebtoken'
+import env from '~/server/env/dotenv'
+import { blackList } from '~/server/utils/blackList'
+
+export default eventHandler((event) => {
+  if (!blackList.includes(event.path)) {
+    return
+  }
+
+  const token = event.headers.get('Authorization')?.split(' ')[1] // Bearer <token>
+  if (!token) {
+    return {
+      statusCode: 401,
+      statusMessage: 'Unauthorized',
+      success: false,
+    }
+  }
+
+  try {
+    const decoded = jwt.verify(token, env.HANA_JWT_SECRET!)
+    event.context.jwtPayload = decoded
+  }
+  catch {
+    return {
+      statusCode: 401,
+      statusMessage: 'Invalid token',
+      success: false,
+    }
+  }
+})
diff --git a/server/middleware/session.ts b/server/middleware/session.ts
deleted file mode 100644
index 1f84d1c..0000000
--- a/server/middleware/session.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import process from 'node:process'
-import { PrismaSessionStore } from '@quixo3/prisma-session-store'
-import session from 'express-session'
-import prisma from '~/lib/prisma'
-import env from '~/server/env/dotenv'
-
-const expressSessionMiddleware = session({
-  secret: env.HANA_SESSION_KEY as string,
-  resave: false,
-  saveUninitialized: false,
-  cookie: {
-    httpOnly: true,
-    secure: env.NODE_ENV === 'production',
-    maxAge: 1000 * 60 * 60 * 24 * 7,
-  },
-  store: new PrismaSessionStore(prisma, {
-    checkPeriod: 2 * 60 * 1000,
-    dbRecordIdIsSessionId: true,
-  }),
-}) as any
-
-export default fromNodeMiddleware(expressSessionMiddleware)
diff --git a/server/types/jwt.d.ts b/server/types/jwt.d.ts
new file mode 100644
index 0000000..116cbff
--- /dev/null
+++ b/server/types/jwt.d.ts
@@ -0,0 +1,7 @@
+export interface JwtPayload {
+  id: number
+  email: string
+  username: string
+  avatar: string | null
+  site: string | null
+}
diff --git a/server/utils/blackList.ts b/server/utils/blackList.ts
new file mode 100644
index 0000000..5caebb3
--- /dev/null
+++ b/server/utils/blackList.ts
@@ -0,0 +1,3 @@
+export const blackList = [
+  '/api/messages/post',
+]
diff --git a/server/utils/formattedEventHandler.ts b/server/utils/formattedEventHandler.ts
new file mode 100644
index 0000000..dcff9e5
--- /dev/null
+++ b/server/utils/formattedEventHandler.ts
@@ -0,0 +1,53 @@
+interface ApiResponse<T> {
+  statusCode: number
+  statusMessage: string
+  success: boolean
+  payload: T
+}
+
+interface HandlerResponse<T> {
+  statusCode?: number
+  statusMessage?: string
+  success?: boolean
+  payload?: T
+}
+
+export function formattedEventHandler<T>(
+  handler: (event: any) => Promise<HandlerResponse<T> | void> | HandlerResponse<T> | void,
+) {
+  return defineEventHandler(async (event) => {
+    try {
+      const res = await handler(event)
+
+      if (res === undefined) {
+        return {
+          statusCode: 200,
+          statusMessage: 'OK',
+          success: true,
+          payload: null,
+        } satisfies ApiResponse<null>
+      }
+
+      const { statusCode, statusMessage, success, payload } = res
+
+      const formattedPayload = (payload === undefined || payload === null
+        ? (null as T extends void ? null : T)
+        : payload) as T extends void ? null : T
+
+      return {
+        statusCode: statusCode || 200,
+        statusMessage: statusMessage || 'OK',
+        success: success ?? true,
+        payload: formattedPayload,
+      } satisfies ApiResponse<T extends void ? null : T>
+    }
+    catch (error: any) {
+      return {
+        statusCode: error.statusCode || 500,
+        statusMessage: error.statusMessage || 'Internal Server Error',
+        success: false,
+        payload: null,
+      } satisfies ApiResponse<null>
+    }
+  })
+}
diff --git a/store/index.ts b/store/index.ts
index af5cb2d..3b4b192 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -1,7 +1,9 @@
 import { useMessagesStore } from './modules/messages'
+import { useUserInfoStore } from './modules/user'
 
 export function useStore() {
   return {
     messagesStore: useMessagesStore(),
+    userStore: useUserInfoStore(),
   }
 }
diff --git a/store/modules/user.ts b/store/modules/user.ts
new file mode 100644
index 0000000..3a2fd11
--- /dev/null
+++ b/store/modules/user.ts
@@ -0,0 +1,21 @@
+import type { JwtPayload } from '~/server/types/jwt'
+
+export const useUserInfoStore = defineStore('userInfo', () => {
+  const userInfo = ref<JwtPayload>()
+  const loggedIn = computed(() => !!userInfo.value)
+
+  function setUserInfo(info: JwtPayload) {
+    userInfo.value = info
+  }
+
+  function logout() {
+    userInfo.value = undefined
+  }
+
+  return {
+    userInfo,
+    loggedIn,
+    setUserInfo,
+    logout,
+  }
+}, { persist: true })