ssy/lan-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复访客模式认证状态判断，完善访客浏览体验

Browse Source 
- 后端 /auth/me 未登录时返回 401 而非 200
- 访客只能访问机器列表，其他页面自动重定向
- 侧边栏隐藏非访客菜单，无登录入口提示
- 登录页需手动访问 /login
This commit is contained in:
shirainbown
2026-06-19 01:12:36 +08:00
parent 8d6f831d22
commit 340ad6b109
5 changed files with 113 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/api/index.js
View File

@@ -17,7 +17,7 @@ api.interceptors.response.use(
const msg = err.response?.data?.error || err.message || '请求失败'
if (err.response?.status === 401) {
refreshAuth()
window.location.href = '/login'
// 不再自动跳转到登录页，只在需要管理员权限时由业务逻辑处理
return Promise.reject(err)
}
ElMessage.error(msg)

89
web/src/components/MainLayout.vue
View File

@@ -12,22 +12,33 @@
</div>
<nav class="nav">
<router-link to="/dashboard" class="nav-item" active-class="active">
<el-icon><Odometer /></el-icon>
<span>仪表盘</span>
</router-link>
<router-link to="/machines" class="nav-item" active-class="active">
<el-icon><Monitor /></el-icon>
<span>机器列表</span>
</router-link>
<router-link to="/topology" class="nav-item" active-class="active">
<el-icon><Share /></el-icon>
<span>拓扑图</span>
</router-link>
<router-link to="/logs" class="nav-item" active-class="active">
<el-icon><Document /></el-icon>
<span>操作日志</span>
</router-link>
<!-- 管理员：全部导航 -->
<template v-if="isAdmin">
<router-link to="/dashboard" class="nav-item" active-class="active">
<el-icon><Odometer /></el-icon>
<span>仪表盘</span>
</router-link>
<router-link to="/machines" class="nav-item" active-class="active">
<el-icon><Monitor /></el-icon>
<span>机器列表</span>
</router-link>
<router-link to="/topology" class="nav-item" active-class="active">
<el-icon><Share /></el-icon>
<span>拓扑图</span>
</router-link>
<router-link to="/logs" class="nav-item" active-class="active">
<el-icon><Document /></el-icon>
<span>操作日志</span>
</router-link>
</template>
<!-- 访客：只能看到机器列表 -->
<template v-else>
<router-link to="/machines" class="nav-item" active-class="active">
<el-icon><Monitor /></el-icon>
<span>机器列表</span>
</router-link>
</template>
</nav>
<div class="sidebar-footer">
@@ -35,11 +46,6 @@
<el-icon class="theme-icon"><component :is="isDark ? Sunny : Moon" /></el-icon>
<span>{{ isDark ? '浅色模式' : '深色模式' }}</span>
</div>
<div v-if="!isLoggedIn" class="guest-notice">
<el-icon><Warning /></el-icon>
<span>访客浏览，仅查看</span>
<el-button text size="small" type="primary" @click="router.push('/login')">登录</el-button>
</div>
<div class="user-info" v-if="isLoggedIn">
<el-icon class="user-icon"><UserFilled /></el-icon>
<div class="user-meta">
@@ -48,7 +54,8 @@
</div>
</div>
<div class="footer-actions" v-if="isLoggedIn">
<el-button text class="footer-btn" @click="openChangePassword">
<!-- 管理员才有修改密码 -->
<el-button v-if="isAdmin" text class="footer-btn" @click="openChangePassword">
<el-icon><Lock /></el-icon>
<span>修改密码</span>
</el-button>
@@ -61,10 +68,6 @@
</aside>
<main class="main">
<div class="guest-banner" v-if="!isLoggedIn">
<el-icon><Warning /></el-icon>
<span>您当前以访客身份浏览，所有数据为只读展示，如需操作请<el-button text type="primary" size="small" @click="router.push('/login')">登录</el-button></span>
</div>
<div class="main-inner">
<router-view />
</div>
@@ -131,7 +134,7 @@
<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Odometer, Monitor, Share, Document, UserFilled, SwitchButton, Sunny, Moon, Lock, Key, CircleCheck, Connection, Warning } from '@element-plus/icons-vue'
import { Odometer, Monitor, Share, Document, UserFilled, SwitchButton, Sunny, Moon, Lock, Key, CircleCheck } from '@element-plus/icons-vue'
import { getAuth, refreshAuth } from '@/router'
import { logout as apiLogout, changePassword } from '@/api'
import { ElMessage } from 'element-plus'
@@ -383,36 +386,6 @@ html.dark .brand-logo {
background: var(--page-bg);
transition: background .25s ease;
}
.guest-banner {
padding: 10px 16px;
background: rgba(242, 201, 76, 0.12);
border: 1px solid rgba(242, 201, 76, 0.3);
border-radius: 8px;
margin: 10px 10px 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #d29922;
}
.guest-banner .el-icon {
font-size: 16px;
}
.guest-notice {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: rgba(242, 201, 76, 0.10);
border: 1px solid rgba(242, 201, 76, 0.2);
font-size: 12px;
color: #d29922;
}
.guest-notice .el-icon {
font-size: 14px;
}
.main-inner {
padding: 10px;
}
@@ -425,7 +398,5 @@ html.dark .brand-logo {
.user-info { justify-content: center; padding: 10px; }
.theme-toggle { justify-content: center; padding: 10px; }
.main { margin-left: 64px; }
.guest-notice span { display: none; }
.guest-notice .el-button { display: none; }
}
</style>

40
web/src/router/index.js
View File

@@ -11,14 +11,8 @@ const routes = [
{
path: '/',
component: () => import('@/components/MainLayout.vue'),
redirect: '/machines',
children: [
{ path: '', redirect: '/dashboard' },
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { public: true },
},
{
path: 'machines',
name: 'MachineList',
@@ -29,19 +23,25 @@ const routes = [
path: 'machines/:id',
name: 'MachineDetail',
component: () => import('@/views/MachineDetail.vue'),
meta: { public: true },
meta: { admin: true },
},
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { admin: true },
},
{
path: 'topology',
name: 'Topology',
component: () => import('@/views/Topology.vue'),
meta: { public: true },
meta: { admin: true },
},
{
path: 'logs',
name: 'Logs',
component: () => import('@/views/Logs.vue'),
meta: { public: true },
meta: { admin: true },
},
]
},
@@ -66,8 +66,24 @@ router.beforeEach(async (to, from, next) => {
authChecked = true
}
if (to.meta.guestOnly && authState.is_logged_in) {
return next('/')
// 未登录，且不是公开页面也不是登录页 → 强制去登录
if (!authState.is_logged_in && !to.meta.public && !to.meta.guestOnly) {
return next('/login?redirect=' + encodeURIComponent(to.fullPath))
}
// 已登录访客，访问需要 admin 的页面 → 去机器列表
if (authState.is_logged_in && !authState.is_admin && to.meta.admin) {
return next('/machines')
}
// 已登录访客，访问登录页 → 去机器列表
if (authState.is_logged_in && !authState.is_admin && to.meta.guestOnly) {
return next('/machines')
}
// 管理员访问登录页 → 去仪表盘
if (authState.is_admin && to.meta.guestOnly) {
return next('/dashboard')
}
next()

59
web/src/views/MachineList.vue
View File

@@ -1,10 +1,16 @@
<template>
<div class="page">
<!-- 访客提示 -->
<div v-if="!isAdmin" class="guest-page-notice">
<el-icon><Warning /></el-icon>
<span>当前为只读模式</span>
</div>
<!-- Toolbar -->
<div class="toolbar">
<div class="search-wrap">
<el-icon class="search-icon"><Search /></el-icon>
<el-input v-model="search" placeholder="搜索主机名或 IP" clearable @change="load" />
<el-input v-model="search" placeholder="搜索主机名" clearable @change="load" />
</div>
<el-select v-model="osFilter" placeholder="系统类型" clearable @change="load" class="os-select">
<el-option label="Linux" value="Linux">
@@ -28,7 +34,8 @@
<!-- Cards Grid -->
<div class="cards-grid" v-if="machines.length">
<div v-for="m in machines" :key="m.id" class="server-card"
<!-- 管理员卡片：完整信息 + 可点击 -->
<div v-if="isAdmin" v-for="m in machines" :key="m.id" class="server-card"
:class="[{ 'offline-card': !m.is_online }]"
@click="goDetail(m.id)">
<div class="card-header">
@@ -49,7 +56,7 @@
</el-tag>
</div>
<div class="meta-row">
<span v-if="isAdmin" class="meta-ip">
<span class="meta-ip">
<el-icon :size="10"><Link /></el-icon> {{ m.ip }}
</span>
<span class="meta-item">
@@ -59,7 +66,7 @@
<span v-if="m.uptime" class="meta-uptime">
<el-icon :size="10"><Timer /></el-icon> {{ m.uptime }}
</span>
<span v-if="isAdmin && m.pve_host_id && m.pve_vmid" class="meta-pve">
<span v-if="m.pve_host_id && m.pve_vmid" class="meta-pve">
<el-tag size="small" :type="m.pve_vm_status === 'running' ? 'success' : 'danger'" effect="light" round class="vm-tag">
<el-icon :size="10"><component :is="m.pve_vm_status === 'running' ? VideoPlay : VideoPause" /></el-icon>
{{ m.pve_vm_status === 'running' ? 'VM运行中' : m.pve_vm_status === 'stopped' ? 'VM已停止' : 'VM检测中' }}
@@ -113,6 +120,31 @@
同步于 {{ formatTime(m.ssh_synced_at) }}
</div>
</div>
<!-- 访客卡片：仅主机名 + 状态 + OS，不可点击 -->
<div v-if="!isAdmin" v-for="m in machines" :key="m.id" class="server-card guest-card"
:class="[{ 'offline-card': !m.is_online }]">
<div class="card-header">
<div class="title-row">
<div class="os-badge" :class="osClass(m.os_type)" :title="m.os_type">
<el-icon :size="12">
<component :is="osIcon(m.os_type)" />
</el-icon>
<span>{{ osShort(m.os_type) }}</span>
</div>
<span class="hostname">{{ m.hostname }}</span>
<el-tag :type="m.is_online ? 'success' : 'danger'" size="small" effect="light" round class="status-tag">
<el-icon :size="10"><component :is="m.is_online ? CircleCheck : CircleClose" /></el-icon>
{{ m.is_online ? '在线' : '离线' }}
</el-tag>
</div>
<div class="meta-row">
<span class="meta-item">
<el-icon :size="10"><Cpu /></el-icon> {{ m.os_type }}
</span>
</div>
</div>
</div>
</div>
<el-empty v-if="!machines.length" description="暂无机器" :image-size="80">
@@ -210,7 +242,7 @@ import {
Plus, Search, Download, Upload, Check, Platform, Monitor, Apple,
QuestionFilled, CircleCheck, CircleClose, Service, Link, Cpu, Timer,
Collection, Histogram, Connection, Clock, VideoPlay, VideoPause, Lock, User, Key,
EditPen, Grid, InfoFilled
EditPen, Grid, InfoFilled, Warning
} from '@element-plus/icons-vue'
import { fetchMachines, createMachine, updateMachine, checkAuth, uiRefreshInterval, exportData, importData, fetchPVEHosts, fetchVMStatus } from '@/api'
import { getAuth } from '@/router'
@@ -218,7 +250,6 @@ import { ElMessage } from 'element-plus'
const router = useRouter()
const isAdmin = getAuth().is_admin
const isLoggedIn = getAuth().is_logged_in
const machines = ref([])
const pveHosts = ref([])
const search = ref('')
@@ -402,6 +433,22 @@ function formatTime(t) {
</script>
<style scoped>
.guest-page-notice {
padding: 10px 16px;
background: rgba(242, 201, 76, 0.12);
border: 1px solid rgba(242, 201, 76, 0.3);
border-radius: 8px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #d29922;
}
.guest-page-notice .el-icon {
font-size: 16px;
}
.toolbar {
display: flex;
align-items: center;