diff --git a/web/src/api/token.ts b/web/src/api/token.ts
new file mode 100644
index 00000000..903c213b
--- /dev/null
+++ b/web/src/api/token.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request/axios'
+
+export async function fetchAPIToken() {
+        try {
+                const response = await request.get('/token_10years')
+                return response.data
+        } catch (error) {
+                throw error
+        }
+}
\ No newline at end of file
diff --git a/web/src/store/modules/auth/index.ts b/web/src/store/modules/auth/index.ts
index 17a6ef0a..aba61eb0 100644
--- a/web/src/store/modules/auth/index.ts
+++ b/web/src/store/modules/auth/index.ts
@@ -13,6 +13,12 @@ export const useAuthStore = defineStore('auth-store', {
     expiresIn: getExpiresIn(),
   }),
 
+  getters: {
+    isValid(): boolean {
+      return !!(this.token && this.expiresIn && this.expiresIn > Date.now() / 1000)
+    },
+  },
+
   actions: {
     getToken() {
       return this.token
@@ -36,6 +42,7 @@ export const useAuthStore = defineStore('auth-store', {
       this.expiresIn = undefined
       removeExpiresIn()
     },
+
   },
 })
 
diff --git a/web/src/views/admin/index.vue b/web/src/views/admin/index.vue
index 7faf0fc2..a7798124 100644
--- a/web/src/views/admin/index.vue
+++ b/web/src/views/admin/index.vue
@@ -20,13 +20,13 @@ const USER_ROUTE = 'AdminUser'
 const MODEL_ROUTE = 'AdminModel'
 const MODELRATELIMIT_ROUTUE = 'ModelRateLimit'
 
-const needPermission = computed(() => !authStore.token) // || (!!authStore.token && authStore.expiresIn < Date.now() / 1000))
+const needPermission = computed(() => !authStore.isValid)
 
 const collapsed: Ref<boolean> = ref(false)
 const activeKey = ref(currentRoute.name?.toString())
 
 const getMobileClass = computed<CSSProperties>(() => {
-    if (isMobile.value) {
+  if (isMobile.value) {
     return {
       zIndex: 50,
     }
@@ -94,40 +94,39 @@ function handleChatHome() {
 </script>
 
 <template>
-    <div class="h-full flex flex-col" :class="getMobileClass">
-      <header
-        class="sticky flex flex-shrink-0 items-center justify-between  overflow-hidden h-14 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur">
-        <h1 v-if="isMobile"
-          class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap">
-          Admin
-        </h1>
-        <div v-if="isMobile" class="flex items-center">
-          <button class="flex items-center justify-center mr-5" @click="handleUpdateCollapsed">
-            <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
-            <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
-          </button>
-        </div>
-        <h1 v-if="!isMobile"
-          class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap ml-16">
-          Admin
-        </h1>
-        <HoverButton @click="handleChatHome" class="mr-5">
-          <span class="text-xl text-[#4f555e] dark:text-white">
-            <SvgIcon icon="ic:baseline-home" />
-          </span>
-        </HoverButton>
-      </header>
-        <NLayout has-sider class="flex-1 overflow-y-auto">
-          <NLayoutSider bordered collapse-mode="width" :width="240"  :collapsed="collapsed"  :collapsed-width="isMobile ? 0 : 64"
-            :show-trigger="isMobile ? false : 'arrow-circle'" :style="getMobileClass" @collapse="collapsed = true"
-            @expand="collapsed = false">
-            <NMenu v-model:value="activeKey" :collapsed="collapsed"  :collapsed-icon-size="22"
-              :options="menuOptions" />
-          </NLayoutSider>
-          <NLayout>
-            <router-view />
-            <Permission :visible="needPermission" />
-          </NLayout>
-        </NLayout>
-    </div>
+  <div class="h-full flex flex-col" :class="getMobileClass">
+    <header
+      class="sticky flex flex-shrink-0 items-center justify-between  overflow-hidden h-14 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur">
+      <h1 v-if="isMobile"
+        class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap">
+        Admin
+      </h1>
+      <div v-if="isMobile" class="flex items-center">
+        <button class="flex items-center justify-center mr-5" @click="handleUpdateCollapsed">
+          <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
+          <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
+        </button>
+      </div>
+      <h1 v-if="!isMobile"
+        class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap ml-16">
+        Admin
+      </h1>
+      <HoverButton @click="handleChatHome" class="mr-5">
+        <span class="text-xl text-[#4f555e] dark:text-white">
+          <SvgIcon icon="ic:baseline-home" />
+        </span>
+      </HoverButton>
+    </header>
+    <NLayout has-sider class="flex-1 overflow-y-auto">
+      <NLayoutSider bordered collapse-mode="width" :width="240" :collapsed="collapsed"
+        :collapsed-width="isMobile ? 0 : 64" :show-trigger="isMobile ? false : 'arrow-circle'" :style="getMobileClass"
+        @collapse="collapsed = true" @expand="collapsed = false">
+        <NMenu v-model:value="activeKey" :collapsed="collapsed" :collapsed-icon-size="22" :options="menuOptions" />
+      </NLayoutSider>
+      <NLayout>
+        <router-view />
+        <Permission :visible="needPermission" />
+      </NLayout>
+    </NLayout>
+  </div>
 </template>
diff --git a/web/src/views/bot/all.vue b/web/src/views/bot/all.vue
index 19c4648b..0d8412cf 100644
--- a/web/src/views/bot/all.vue
+++ b/web/src/views/bot/all.vue
@@ -1,33 +1,30 @@
 <script setup lang="ts">
-import { onMounted, ref, h } from 'vue'
+import { computed, onMounted, ref, h } from 'vue'
 import { NModal, useDialog, useMessage } from 'naive-ui'
 import Search from '../snapshot/components/Search.vue'
 import { fetchSnapshotAll, fetchSnapshotDelete } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { generateAPIHelper, getBotPostLinks } from '@/service/snapshot'
-import request from '@/utils/request/axios'
+import { fetchAPIToken } from '@/api/token'
 import { t } from '@/locales'
+import { useAuthStore } from '@/store'
+import Permission from '@/views/components/Permission.vue'
+const authStore = useAuthStore()
+
 const dialog = useDialog()
-const nui_msg = useMessage()
+const message = useMessage()
 
-const search_visible = ref(false)
+const searchVisible = ref(false)
 const apiToken = ref('')
 
+const needPermission = computed(() => !authStore.isValid)
+
 const postsByYearMonth = ref<Record<string, Snapshot.PostLink[]>>({})
 
 onMounted(async () => {
   await refreshSnapshot()
-  try {
-    const response = await request.get('/token_10years')
-    if (response.status === 200) {
-      apiToken.value = response.data.accessToken
-    }
-    else {
-      nui_msg.error('Failed to fetch API token')
-    }
-  } catch (error) {
-    nui_msg.error('Error fetching API token')
-  }
+  const data = await fetchAPIToken()
+  apiToken.value = data.accessToken
 })
 
 
@@ -37,25 +34,19 @@ async function refreshSnapshot() {
 }
 
 function handleDelete(post: Snapshot.PostLink) {
-  const dialogBox = dialog.warning({
+  dialog.warning({
     title: t('chat_snapshot.deletePost'),
     content: post.title,
     positiveText: t('common.yes'),
     negativeText: t('common.no'),
     onPositiveClick: async () => {
       try {
-        dialogBox.loading = true
         await fetchSnapshotDelete(post.uuid)
         await refreshSnapshot()
-        dialogBox.loading = false
-        nui_msg.success(t('chat_snapshot.deleteSuccess'))
-        Promise.resolve()
+        message.success(t('chat_snapshot.deleteSuccess'))
       }
       catch (error: any) {
-        nui_msg.error(t('chat_snapshot.deleteFailed'))
-      }
-      finally {
-        dialogBox.loading = false
+        message.error(t('chat_snapshot.deleteFailed'))
       }
     },
   })
@@ -63,26 +54,23 @@ function handleDelete(post: Snapshot.PostLink) {
 
 
 function handleShowCode(post: Snapshot.PostLink) {
+  const code = generateAPIHelper(post.uuid, apiToken.value, window.location.origin)
   const dialogBox = dialog.info({
     title: t('bot.showCode'),
-    content: () => h('code', { class: 'whitespace-pre-wrap' }, genAPIHelper(post)),
+    content: () => h('code', { class: 'whitespace-pre-wrap' }, code),
     positiveText: t('common.copy'),
     onPositiveClick: () => {
       // copy to clipboard
-      navigator.clipboard.writeText(genAPIHelper(post))
+      navigator.clipboard.writeText(code)
       dialogBox.loading = false
-      nui_msg.success(t('common.success'))
+      message.success(t('common.success'))
     },
   })
 }
 
 
-function post_url(uuid: string): string {
-        return `#/bot/${uuid}`
-}
-
-function genAPIHelper(post: Snapshot.PostLink) {
-  return generateAPIHelper(post.uuid, apiToken.value, window.location.origin)
+function postUrl(uuid: string): string {
+  return `#/bot/${uuid}`
 }
 
 
@@ -103,14 +91,15 @@ function genAPIHelper(post: Snapshot.PostLink) {
         </h1>
       </div>
       <div class="mr-10">
-        <HoverButton @click="search_visible = true">
+        <HoverButton @click="searchVisible = true">
           <SvgIcon icon="ic:round-search" class="text-2xl" />
         </HoverButton>
-        <NModal v-model:show="search_visible" preset="dialog">
+        <NModal v-model:show="searchVisible" preset="dialog">
           <Search />
         </NModal>
       </div>
     </header>
+    <Permission :visible="needPermission" />
     <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
       <div class="max-w-screen-xl px-4 py-8 mx-auto">
         <div v-for="[yearMonth, postsOfYearMonth] in Object.entries(postsByYearMonth)" :key="yearMonth"
@@ -132,7 +121,7 @@ function genAPIHelper(post: Snapshot.PostLink) {
                     <SvgIcon icon="ic:outline-code" />
                   </div>
                 </div>
-                <a :href="post_url(post.uuid)" :title="post.title"
+                <a :href="postUrl(post.uuid)" :title="post.title"
                   class="block text-xl font-semibold text-gray-900 hover:text-blue-600 mb-2">{{ post.title }}</a>
               </div>
             </li>
diff --git a/web/src/views/chat/layout/Layout.vue b/web/src/views/chat/layout/Layout.vue
index 3c5854cf..42f1f4c8 100644
--- a/web/src/views/chat/layout/Layout.vue
+++ b/web/src/views/chat/layout/Layout.vue
@@ -19,7 +19,7 @@ const { isMobile } = useBasicLayout()
 const collapsed = computed(() => appStore.siderCollapsed)
 
 // login modal will appear when there is no token
-const needPermission = computed(() => !authStore.token) // || (!!authStore.token && authStore.expiresIn < Date.now() / 1000))
+const needPermission = computed(() => !authStore.isValid)
 
 const getMobileClass = computed(() => {
   if (isMobile.value)
diff --git a/web/src/views/snapshot/all.vue b/web/src/views/snapshot/all.vue
index 75d6ded7..182c2f5b 100644
--- a/web/src/views/snapshot/all.vue
+++ b/web/src/views/snapshot/all.vue
@@ -1,50 +1,51 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { NModal, useDialog, useMessage } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useDialog, useMessage } from 'naive-ui'
 import Search from './components/Search.vue'
 import { fetchSnapshotAll, fetchSnapshotDelete } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { getSnapshotPostLinks } from '@/service/snapshot'
 import { t } from '@/locales'
+import { useAuthStore } from '@/store'
+import Permission from '@/views/components/Permission.vue'
 const dialog = useDialog()
-const nui_msg = useMessage()
-const search_visible = ref(false)
+const message = useMessage()
+const searchVisible = ref(false)
+const postsByYearMonth = ref<Record<string, Snapshot.PostLink[]>>({})
+const authStore = useAuthStore()
 
-function post_url(uuid: string): string {
-  return `#/snapshot/${uuid}`
-}
+const needPermission = computed(() => !authStore.isValid)
 
-const postsByYearMonth = ref<Record<string, Snapshot.PostLink[]>>({})
+onMounted(refreshSnapshot)
 
-onMounted(async () => {
-  await refreshSnapshot()
-})
+function postUrl(uuid: string): string {
+  return `#/snapshot/${uuid}`
+}
 
 async function refreshSnapshot() {
-  const snapshots: Snapshot.Snapshot[] = await fetchSnapshotAll()
-  postsByYearMonth.value = getSnapshotPostLinks(snapshots)
+  try {
+    const snapshots = await fetchSnapshotAll()
+    postsByYearMonth.value = getSnapshotPostLinks(snapshots)
+  } catch (error) {
+    console.error('Failed to fetch snapshots:', error)
+    // Error handling can be implemented here
+  }
 }
 
 function handleDelete(post: Snapshot.PostLink) {
-  const dialogBox = dialog.warning({
+  dialog.warning({
     title: t('chat_snapshot.deletePost'),
     content: post.title,
     positiveText: t('common.yes'),
     negativeText: t('common.no'),
     onPositiveClick: async () => {
       try {
-        dialogBox.loading = true
         await fetchSnapshotDelete(post.uuid)
         await refreshSnapshot()
-        dialogBox.loading = false
-        nui_msg.success(t('chat_snapshot.deleteSuccess'))
-        Promise.resolve()
-      }
-      catch (error: any) {
-        nui_msg.error(t('chat_snapshot.deleteFailed'))
-      }
-      finally {
-        dialogBox.loading = false
+        message.success(t('chat_snapshot.deleteSuccess'))
+      } catch (error) {
+        message.error(t('chat_snapshot.deleteFailed'))
+        console.error('Failed to delete snapshot:', error)
       }
     },
   })
@@ -53,33 +54,32 @@ function handleDelete(post: Snapshot.PostLink) {
 
 <template>
   <div class="flex flex-col w-full h-full dark:text-white">
-    <header class="flex items-center justify-between h-16 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 dark:text-white backdrop-blur">
+    <header
+      class="flex items-center justify-between h-16 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 dark:text-white backdrop-blur">
       <div class="flex items-center ml-10">
-        <svg
-          class="w-8 h-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
+        <svg class="w-8 h-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
         </svg>
         <h1 class="text-xl font-semibold text-gray-900">
           {{ $t('chat_snapshot.title') }}
         </h1>
       </div>
       <div class="mr-10">
-        <HoverButton @click="search_visible = true">
+        <HoverButton @click="searchVisible = true">
           <SvgIcon icon="ic:round-search" class="text-2xl" />
         </HoverButton>
-        <NModal v-model:show="search_visible" preset="dialog">
+        <NModal v-model:show="searchVisible" preset="dialog">
           <Search />
         </NModal>
       </div>
     </header>
     <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
-      <div class="max-w-screen-xl px-4 py-8 mx-auto">
-        <div v-for="[yearMonth, postsOfYearMonth] in Object.entries(postsByYearMonth)" :key="yearMonth" class="flex mb-2">
+      <Permission :visible="needPermission" />
+      <div v-if="!needPermission" class="max-w-screen-xl px-4 py-8 mx-auto">
+        <div v-for="[yearMonth, postsOfYearMonth] in Object.entries(postsByYearMonth)" :key="yearMonth"
+          class="flex mb-2">
           <h2 class="flex-none w-28 text-lg font-medium">
             {{ yearMonth }}
           </h2>
@@ -89,15 +89,13 @@ function handleDelete(post: Snapshot.PostLink) {
                 <div class="flex">
                   <time :datetime="post.date" class="mb-1 text-sm font-medium text-gray-600">{{
                     post.date
-                  }}</time>
+                    }}</time>
                   <div class="ml-2 text-sm" @click="handleDelete(post)">
                     <SvgIcon icon="ic:baseline-delete-forever" />
                   </div>
                 </div>
-                <a
-                  :href="post_url(post.uuid)" :title="post.title"
-                  class="block text-xl font-semibold text-gray-900 hover:text-blue-600 mb-2"
-                >{{ post.title }}</a>
+                <a :href="postUrl(post.uuid)" :title="post.title"
+                  class="block text-xl font-semibold text-gray-900 hover:text-blue-600 mb-2">{{ post.title }}</a>
               </div>
             </li>
           </ul>