实现无密码浏览模式

Author: hanxi

README.md

@@ -6,16 +6,30 @@
 
 > ✨ 一款极简、自托管的个人导航网站，基于 Go + Vue 开发。
 
-**在线体验地址** 👉 [https://nav.hanxi.cc](https://nav.hanxi.cc)  
-无需账号密码即可访问，请勿修改或删除公共数据 🙏
+**在线体验地址** 👉 [https://nav.hanxi.cc](https://nav.hanxi.cc)
+
+- 账号: admin
+- 密码: 123456
+
+> [!IMPORTANT]
+> 请勿修改或删除数据 🙏
 
 ---
 
+## 支持功能
+
+- 拖拽排序
+- 夜间模式
+- 适配桌面端和移动端
+- 拉取网站图标或自定义svg图标
+- 无账号密码模式: 不需要账号密码即可编辑
+- 无账号密码浏览模式: 不需要账号密码可浏览，需要账号密码才能编辑
+
 ## 🐳 使用 Docker 快速部署
 
 ### 使用 Docker Compose
 
-#### 国际镜像：
+#### 国际镜像
 
 ```yaml
 services:
@@ -32,7 +46,7 @@ services:
       - /tiny-nav-data:/app/data
 ```
 
-#### 国内镜像：
+#### 国内镜像
 
 ```yaml
 services:
@@ -57,7 +71,7 @@ docker compose up -d
 
 ### 使用 Docker 运行
 
-#### 国际镜像：
+#### 国际镜像
 
 ```bash
 docker run -d \
@@ -69,7 +83,7 @@ docker run -d \
   hanxi/tiny-nav
 ```
 
-### 国内镜像：
+### 国内镜像
 
 ```bash
 docker run -d \
@@ -87,14 +101,18 @@ docker run -d \
 
 1. 前往 Releases 页面 下载对应平台的可执行文件
 2. 无认证启动：
+
 ```bash
 ./tiny-nav --port=58080 --no-auth
 ```
+
 3. 有账号密码启动：
+
 ```bash
 ./tiny-nav --port=58080 --user=admin --password=123456
 ````
-4. 访问地址：http://localhost:58080
+
+4. 访问地址：<http://localhost:58080>
 
 ## 🔧 从源码编译
 
@@ -108,7 +126,7 @@ sh build.sh
 ENABLE_NO_AUTH=true LISTEN_PORT=58080 ./tiny-nav
 ```
 
-访问：http://localhost:58080
+访问：<http://localhost:58080>
 
 ## 🧱 技术栈
 
@@ -117,9 +135,8 @@ ENABLE_NO_AUTH=true LISTEN_PORT=58080 ./tiny-nav
 
 ## 📌 开发计划
 
-- [ ] 支持只读模式：查看免登录，编辑需登录
+- [x] 支持只读模式：查看免登录，编辑需登录
 - [ ] 数据 MD5 对比，避免重复加载
 - [ ] 自动深色模式
 - [ ] 支持书签导入
 - [ ] 支持站内搜索
-

front/src/api/index.ts

@@ -1,5 +1,5 @@
 import { useMainStore } from '@/stores'
-import type { Link, LoginCredentials, SortIndexUpdate } from './types'
+import type { Link, LoginCredentials, SortIndexUpdate, Config } from './types'
 
 const apiBase = import.meta.env.VITE_API_BASE
 
@@ -108,5 +108,15 @@ export const api = {
       method: 'PUT',
       body: JSON.stringify({ categories })
     })
-  }
+  },
+
+  async getConfig(): Promise<Config> {
+    const { data } = await apiFetch<Config>('/config')
+    return data
+  },
+
+  async validateToken(): Promise<{ status: string }> {
+    const { data } = await apiFetch<{ status: string }>('/validate')
+    return data
+  },
 }

front/src/api/types.ts

@@ -16,3 +16,8 @@ export interface SortIndexUpdate {
   sortIndex: number
   category?: string
 }
+
+export interface Config {
+  enableNoAuth: boolean
+  enableNoAuthView: boolean
+}

front/src/components/NavHeader.vue

@@ -18,14 +18,14 @@
 
             <!-- PC端按钮组 -->
             <div class="hidden md:flex items-center gap-4">
-                <button @click="toggleEditMode"
+                <button v-if="showEdit" @click="toggleEditMode"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                     :title="editMode ? '浏览模式' : '编辑模式'">
                     <div
                         :class="[editMode ? 'i-mdi-eye text-blue-500 dark:text-blue-300' : 'i-mdi-pencil text-gray-400 dark:text-gray-300']">
                     </div>
                 </button>
-                <button @click="$emit('add')"
+                <button v-if="showEdit" @click="$emit('add')"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                     title="添加网站">
                     <div class="i-mdi-plus-circle text-gray-400 dark:text-gray-300">
@@ -39,26 +39,33 @@
                     </div>
                 </button>
 
-                <button v-if="!isNoAuthMode" @click="$emit('logout')"
+                <button v-if="showLogout" @click="handleLogout"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                     title="退出登录">
                     <div class="i-mdi-logout text-gray-400 dark:text-gray-300">
                     </div>
                 </button>
+
+                <button v-if="showLogin" @click="$emit('login')"
+                    class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    title="登录">
+                    <div class="i-mdi-login text-gray-400 dark:text-gray-300">
+                    </div>
+                </button>
             </div>
         </div>
 
         <!-- 移动端菜单 -->
         <div v-if="isMobileMenuOpen" class="md:hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-gray-900">
             <div class="flex flex-col gap-2 p-4">
-                <button @click="toggleEditMode"
+                <button v-if="showEdit" @click="toggleEditMode"
                     class="flex items-center gap-3 px-2 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
                     <div
                         :class="[editMode ? 'i-mdi-eye text-blue-500 dark:text-blue-300' : 'i-mdi-pencil text-gray-400 dark:text-gray-300']">
                     </div>
                     {{ editMode ? '浏览模式' : '编辑模式' }}
                 </button>
-                <button @click="$emit('add')"
+                <button v-if="showEdit" @click="$emit('add')"
                     class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
                     <div class="i-mdi-plus-circle text-gray-400 dark:text-gray-300">
                     </div>
@@ -71,32 +78,40 @@
                     </div>
                     {{ themeStore.isDarkTheme ? '浅色模式' : '深色模式' }}
                 </button>
-                <button v-if="!isNoAuthMode" @click="$emit('logout')"
+                <button v-if="showLogout" @click="$emit('logout')"
+                    class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <div class="i-mdi-logout text-gray-400 dark:text-gray-300">
+                    </div>
+                    登出
+                </button>
+                <button v-if="showLogin" @click="$emit('login')"
                     class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
                     <div class="i-mdi-logout text-gray-400 dark:text-gray-300">
                     </div>
-                    退出登录
+                    登录
                 </button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useThemeStore } from '@/stores/themeStore'
+import { useMainStore } from '@/stores'
 
 const themeStore = useThemeStore()
+const store = useMainStore()
 
 const props = defineProps<{
     editMode: boolean
-    isNoAuthMode: boolean
 }>()
 
 const emit = defineEmits<{
     (e: 'update:editMode', value: boolean): void
     (e: 'add'): void
     (e: 'logout'): void
+    (e: 'login'): void
 }>()
 
 const toggleEditMode = () => {
@@ -109,4 +124,41 @@ const toggleMobileMenu = () => {
     isMobileMenuOpen.value = !isMobileMenuOpen.value
 }
 
+const showLogin = ref(false);
+const showLogout = ref(false);
+const showEdit = ref(false);
+
+async function updateAuthenticationStates() {
+    // Check if no authentication is needed
+    if (store.config.enableNoAuth) {
+        showLogin.value = false;
+        showLogout.value = false;
+        showEdit.value = true;
+    } else {
+        // Perform async token validation
+        try {
+            const isValid = await store.validateToken();
+            showLogin.value = !isValid;
+            showLogout.value = isValid;
+            showEdit.value = isValid;
+        } catch (error) {
+            console.error('Error validating token:', error);
+            showLogin.value = true;
+            showLogout.value = false;
+            showEdit.value = false;
+        }
+    }
+}
+
+// Call the function on component mount
+onMounted(() => {
+    updateAuthenticationStates()
+})
+
+const handleLogout = () => {
+    // Emit logout event
+    emit('logout')
+    updateAuthenticationStates()
+}
+
 </script>

front/src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import 'virtual:uno.css'
 import '@unocss/reset/tailwind-compat.css'
+import { useMainStore } from '@/stores'
 
 // 创建应用实例
 const app = createApp(App)
@@ -17,4 +18,13 @@ pinia.use(piniaPluginPersistedstate)
 app.use(pinia)  // Pinia 必须在 router 之前安装
 app.use(router)
 
+// 页面加载时调用 fetchConfig
+async function initializeApp() {
+  const store = useMainStore()
+  const config = await store.fetchConfig()
+  console.log("Fetched config on load:", config)
+}
+
+initializeApp()
+
 app.mount('#app')

front/src/router/index.ts

@@ -5,12 +5,12 @@ const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: '/login',
       name: 'login',
       component: () => import('@/views/Login.vue')
     },
     {
-      path: '/nav',
+      path: '/',
       name: 'nav',
       component: () => import('@/views/Nav.vue'),
       meta: { requiresAuth: true }
@@ -19,25 +19,26 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, _) => {
-  const store = useMainStore()
-
   // 如果路由需要认证
   if (to.meta.requiresAuth) {
-    // 验证 token
-    const isValid = await store.validateToken()
-
-    if (!isValid) {
-      // token 无效，重定向到登录页
-      return { name: 'login' }
+    const store = useMainStore()
+    let needAuth = true
+    if (to.name === 'nav') {
+      const config = store.config
+      if (config.enableNoAuth || config.enableNoAuthView) {
+        needAuth = false
+      }
     }
-  } else if (to.name === 'login') {
-    // 如果要去登录页，先检查是否有有效token
-    const isValid = await store.validateToken()
+    if (needAuth) {
+      // 验证 token
+      const isValid = await store.validateToken()
 
-    if (isValid) {
-      // 如果 token 有效，直接跳转到导航页
-      return { name: 'nav' }
+      if (!isValid) {
+        // token 无效，重定向到登录页
+        return { name: 'login' }
+      }
     }
+    console.log('需要认证的路由:', to.name)
   }
 })