AnCao/web/src/components/AdminRoute.tsx

import React, { useEffect, useState } from 'react'
import { Navigate } from 'react-router-dom'
import { message } from 'antd'

interface AdminRouteProps {
  children: React.ReactNode
}

const AdminRoute: React.FC<AdminRouteProps> = ({ children }) => {
  const [isAdmin, setIsAdmin] = useState<boolean | null>(null)

  useEffect(() => {
    // 检查用户信息
    const userStr = localStorage.getItem('user')
    if (!userStr) {
      setIsAdmin(false)
      return
    }

    try {
      const user = JSON.parse(userStr)
      if (user.username === 'yanlongqi') {
        setIsAdmin(true)
      } else {
        setIsAdmin(false)
        message.error('无权限访问该页面')
      }
    } catch (e) {
      setIsAdmin(false)
    }
  }, [])

  // 正在检查权限时，不显示任何内容
  if (isAdmin === null) {
    return null
  }

  // 如果不是管理员，重定向到首页
  if (!isAdmin) {
    return <Navigate to="/" replace />
  }

  // 是管理员，显示子组件
  return <>{children}</>
}

export default AdminRoute