优化登录成功跳转逻辑 细化前端页面权限

src/layout/Layout.vue

@@ -22,30 +22,26 @@
         text-color="rgba(255,255,255,0.65)"
         active-text-color="#fff"
         :collapse="isCollapse">
-        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`">
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
           <el-icon><DataLine /></el-icon>
           <span>概览面板</span>
         </el-menu-item>
-        <template v-if="userRole === 'admin'">
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
-          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`">
+          <el-icon><List /></el-icon>
-            <el-icon><List /></el-icon>
+          <span>任务管理</span>
-            <span>任务管理</span>
+        </el-menu-item>
-          </el-menu-item>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
-          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`">
+          <el-icon><Setting /></el-icon>
-            <el-icon><Setting /></el-icon>
+          <span>系统配置</span>
-            <span>系统配置</span>
+        </el-menu-item>
-          </el-menu-item>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`" v-if="hasPermission(UserMask.SuperAdmin, userInfo?.mask)">
-          <template v-if="userInfo.mask === 2">
+          <el-icon><User /></el-icon>
-            <el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`">
+          <span>用户管理</span>
-              <el-icon><User /></el-icon>
+        </el-menu-item>
-              <span>用户管理</span>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/events`">
-            </el-menu-item>
+          <el-icon><List /></el-icon>
-          </template>
+          <span>事件记录</span>
-          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/events`">
+        </el-menu-item>
-            <el-icon><List /></el-icon>
-            <span>事件记录</span>
-          </el-menu-item>
-        </template>
       </el-menu>
     </el-aside>
     
@@ -91,11 +87,18 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { DataLine, List, Expand, Fold, Setting, User, SwitchButton } from '@element-plus/icons-vue'
 import { ADMIN_ROUTE_BASE } from '@/config/api.config'
+import { UserMask, hasPermission } from '@/utils/permission'
 
 const router = useRouter()
 const route = useRoute()
 const userRole = computed(() => localStorage.getItem('userRole'))
-const userInfo = computed(() => JSON.parse(localStorage.getItem('userInfo')))
+const userInfo = computed(() => {
+  try {
+    return JSON.parse(localStorage.getItem('userInfo'))
+  } catch {
+    return null
+  }
+})
 
 const handleLogout = () => {
   localStorage.removeItem('token')

src/router/index.js

@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
 import Layout from '../layout/Layout.vue'
 import { UserAPI } from '../api/user'
 import { ADMIN_ROUTE_BASE } from '@/config/api.config'
+import { UserMask, hasPermission } from '@/utils/permission'
 
 const routes = [
   {
@@ -28,25 +29,33 @@ const routes = [
         path: 'dashboard',
         name: 'Dashboard',
         component: () => import('../views/Dashboard.vue'),
-        meta: { roles: ['admin', 'guest'] }
+        meta: { 
+          minMask: UserMask.Admin  // 管理员及以上权限可访问
+        }
       },
       {
         path: 'tasks',
         name: 'Tasks',
         component: () => import('../views/TaskManagement.vue'),
-        meta: { roles: ['admin'] }
+        meta: { 
+          minMask: UserMask.Admin  // 管理员及以上权限可访问
+        }
       },
       {
         path: 'config',
         name: 'Config',
         component: () => import('../views/ConfigView.vue'),
-        meta: { roles: ['admin'] }
+        meta: { 
+          minMask: UserMask.Admin  // 管理员及以上权限可访问
+        }
       },
       {
         path: 'users',
         name: 'Users',
         component: () => import('../views/UserManagement.vue'),
-        meta: { roles: ['admin'] }
+        meta: { 
+          minMask: UserMask.SuperAdmin  // 仅超级管理员可访问
+        }
       },
       {
         path: 'profile',
@@ -129,31 +138,15 @@ router.beforeEach(async (to, from, next) => {
   if (to.path.startsWith(ADMIN_ROUTE_BASE)) {
     const token = localStorage.getItem('token')
     const isAuthenticated = localStorage.getItem('isAuthenticated')
-    const userRole = localStorage.getItem('userRole')
+    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
     
-    if (!isAuthenticated) {
+    if (!isAuthenticated || !token || !userInfo) {
       next('/login')
       return
     }
 
-    // 如果是管理员但没有用户信息，尝试获取
-    if (userRole === 'admin' && token) {
-      try {
-        const response = await UserAPI.getUserInfo()
-        if (response.retcode !== 0) {
-          localStorage.clear()
-          next('/login')
-          return
-        }
-      } catch (error) {
-        localStorage.clear()
-        next('/login')
-        return
-      }
-    }
-
     // 检查权限
-    if (to.meta.roles && !to.meta.roles.includes(userRole)) {
+    if (to.meta.minMask !== undefined && !hasPermission(to.meta.minMask, userInfo.mask)) {
       ElMessage.error('没有访问权限')
       next('/admin/dashboard')
       return

src/utils/permission.js

@@ -0,0 +1,48 @@
+// 用户权限掩码
+export const UserMask = {
+  Guest: -1,
+  User: 0,
+  Admin: 1,
+  SuperAdmin: 2
+}
+
+// 检查用户是否有权限
+export function hasPermission(requiredMask, userMask) {
+  // 超级管理员拥有所有权限
+  if (userMask === UserMask.SuperAdmin) {
+    return true
+  }
+
+  // 管理员拥有除超级管理员外的所有权限
+  if (userMask === UserMask.Admin && requiredMask !== UserMask.SuperAdmin) {
+    return true
+  }
+
+  // 普通用户只能访问用户级别的功能
+  if (userMask === UserMask.User && requiredMask <= UserMask.User) {
+    return true
+  }
+
+  // 访客只能访问访客功能
+  if (userMask === UserMask.Guest && requiredMask === UserMask.Guest) {
+    return true
+  }
+
+  return false
+}
+
+// 获取用户角色标签
+export function getUserRoleLabel(mask) {
+  switch (mask) {
+    case UserMask.SuperAdmin:
+      return '超级管理员'
+    case UserMask.Admin:
+      return '管理员'
+    case UserMask.User:
+      return '普通用户'
+    case UserMask.Guest:
+      return '访客'
+    default:
+      return '未知'
+  }
+} 

src/views/LoginView.vue

@@ -65,6 +65,7 @@ import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { User, Lock } from '@element-plus/icons-vue'
 import { UserAPI } from '../api/user'
+import { UserMask } from '@/utils/permission'
 
 const router = useRouter()
 const loginFormRef = ref(null)
@@ -102,27 +103,32 @@ const handleLogin = async () => {
     if (valid) {
       loading.value = true
       try {
-        const response = await UserAPI.login({
+        const response = await UserAPI.login(loginForm.value)
-          username: loginForm.value.username,
-          password: loginForm.value.password
-        })
-
         if (response.retcode === 0) {
-          // 保存 用户信息
           localStorage.setItem('token', JSON.stringify(response.data))
           localStorage.setItem('isAuthenticated', 'true')
+          localStorage.setItem('userRole', 'admin')
 
           // 获取用户信息
-          const userInfo = await UserAPI.getUserInfo()
+          const userInfoResponse = await UserAPI.getUserInfo()
-          if (userInfo.retcode === 0) {
+          if (userInfoResponse.retcode === 0) {
-            localStorage.setItem('userRole', 'admin')
+            localStorage.setItem('userInfo', JSON.stringify(userInfoResponse.data))
-            localStorage.setItem('userInfo', JSON.stringify(userInfo.data))
+            
+            // 根据用户权限决定跳转页面
+            if (userInfoResponse.data.mask >= UserMask.Admin) {
+              router.push('/admin/dashboard')  // 管理员及以上跳转到概览页
+            } else {
+              router.push('/admin/events')     // 普通用户跳转到事件记录页
+            }
+            
             ElMessage.success('登录成功')
-            router.push('/dashboard')
           }
+        } else {
+          ElMessage.error(response.message || '登录失败')
         }
       } catch (error) {
         console.error('登录失败:', error)
+        ElMessage.error('登录失败，请重试')
       } finally {
         loading.value = false
       }