mini-starter/packages/auth-management-ui

@d8d/auth-management-ui

单租户认证管理界面独立包，提供完整的用户认证和登录功能。

功能特性

• 🔐 完整的用户认证系统
• 🎨 基于共享UI组件的现代化界面
• ⚡ 使用React 19 + TypeScript + TanStack Query
• 📦 独立的包结构，支持workspace依赖
• 🧪 完整的测试套件
• 🔧 支持独立构建和部署

安装

pnpm add @d8d/auth-management-ui

使用

基本使用

import { AuthProvider, AuthManagement } from '@d8d/auth-management-ui';

function App() {
  return (
    <AuthProvider>
      <AuthManagement />
    </AuthProvider>
  );
}

使用认证Hook

import { useAuth } from '@d8d/auth-management-ui';

function UserProfile() {
  const { user, isAuthenticated, login, logout } = useAuth();

  if (!isAuthenticated) {
    return <div>请先登录</div>;
  }

  return (
    <div>
      <h1>欢迎，{user?.username}</h1>
      <button onClick={logout}>退出登录</button>
    </div>
  );
}

使用登录页面

import { LoginPage } from '@d8d/auth-management-ui';

function LoginRoute() {
  return <LoginPage />;
}

导出接口

组件

• AuthProvider - 认证状态管理组件
• AuthManagement - 主认证管理组件
• LoginPage - 登录页面组件

Hooks

• useAuth - 认证状态和操作hook

API客户端

• authClient - 认证API客户端
• authEndpoints - 认证API端点配置

类型定义

• AuthContextType - 认证上下文类型
• AuthStatus - 认证状态类型
• AuthConfig - 认证配置类型

开发

构建

pnpm build

测试

pnpm test

验证导出接口

node verify-exports-simple.mjs

依赖

• @d8d/shared-ui-components - 共享UI组件
• @d8d/auth-module - 认证模块API
• react - React框架
• @tanstack/react-query - 数据获取和状态管理
• react-hook-form - 表单处理
• react-router - 路由管理

许可证

MIT