@autolabz/auth-sdk

AutoLab 认证 SDK - React 组件库

📦 安装

npm install @autolabz/auth-sdk

🚀 快速开始

1. 包裹应用根组件（使用环境变量配置绝对地址）

import { AuthProvider } from '@autolabz/auth-sdk';

function App() {
  const authServiceUrl = import.meta.env.VITE_AUTH_API_BASE_URL; 
  return (
    <AuthProvider authServiceUrl={authServiceUrl}>
      <YourApp />
    </AuthProvider>
  );
}

2. 使用 AuthAvatar 组件

import { AuthAvatar } from '@autolabz/auth-sdk';

function Header() {
  return (
    <div className="header">
      <h1>我的应用</h1>
      <AuthAvatar authPortalUrl={import.meta.env.VITE_OAUTH_PROFILE_URL} />
    </div>
  );
}

3. 使用 useAuth Hook

import { useAuth } from '@autolabz/auth-sdk';

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

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

  return (
    <div>
      <p>欢迎, {user.nickname}</p>
      <button onClick={logout}>退出登录</button>
    </div>
  );
}

📚 API 文档

AuthProvider

| Props | 类型 | 必需 | 描述 | |-------|------|------|------| | children | ReactNode | ✅ | 子组件 | | authServiceUrl | string | ✅ | 认证服务 API 基础地址 |

useAuth Hook

返回值:

{
  isAuthenticated: boolean;
  user: User | null;
  login: (user: User, refreshToken: string) => void;
  logout: () => Promise<void>;
  refreshAuth: () => void;
}

AuthAvatar

| Props | 类型 | 必需 | 描述 | |-------|------|------|------| | authPortalUrl | string | ❌ | 认证门户 URL（建议显式传入完整 URL） |

🔑 核心特性

• ✅ 自动跨标签页状态同步
• ✅ LocalStorage 持久化
• ✅ TypeScript 类型支持
• ✅ 零配置使用
• ✅ 样式隔离

📝 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

📄 License

MIT