apps-key-guard 0.0.1

package/README.md

@@ -0,0 +1,191 @@
+# @apps-admin/key-guard
+
+一个基于密钥验证的 React 访问控制组件，支持本地缓存和自动验证。
+
+## 功能特性
+
+- 基于密钥的访问控制
+- 本地存储密钥，自动验证
+- 支持密钥等级检查（排除 none 等级）
+- 支持密钥过期检查
+- 完全可自定义样式
+- TypeScript 支持
+
+## 安装
+
+```bash
+npm install @apps-admin/key-guard
+```
+
+或者
+
+```bash
+yarn add @apps-admin/key-guard
+```
+
+## 使用方法
+
+### 基础用法
+
+```tsx
+import { KeyGuard } from '@apps-admin/key-guard';
+
+function App() {
+  return (
+    <KeyGuard appName="my-app" apiBaseUrl="http://localhost:8080">
+      <div>
+        <h1>受保护的内容</h1>
+        <p>只有通过密钥验证的用户才能看到这里的内容</p>
+      </div>
+    </KeyGuard>
+  );
+}
+```
+
+### 高级用法
+
+```tsx
+import { KeyGuard } from '@apps-admin/key-guard';
+
+function App() {
+  const handleValidated = (level: string) => {
+    console.log('用户验证成功，等级:', level);
+    // 可以根据等级做不同的处理
+  };
+
+  return (
+    <KeyGuard
+      appName="my-app"
+      apiBaseUrl="https://api.example.com"
+      title="请输入访问密钥"
+      placeholder="输入您的密钥"
+      buttonText="提交验证"
+      onValidated={handleValidated}
+      customStyle={{
+        backgroundColor: '#f0f0f0',
+      }}
+    >
+      <div>
+        <h1>受保护的内容</h1>
+        <p>只有通过密钥验证的用户才能看到这里的内容</p>
+      </div>
+    </KeyGuard>
+  );
+}
+```
+
+## API 参数
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| `appName` | `string` | 是 | - | 应用名称，用于标识应用 |
+| `apiBaseUrl` | `string` | 否 | `http://localhost:8080` | API 基础 URL |
+| `children` | `ReactNode` | 是 | - | 验证成功后要渲染的子组件 |
+| `onValidated` | `(level: string) => void` | 否 | - | 验证成功后的回调函数，返回密钥等级 |
+| `customStyle` | `CSSProperties` | 否 | - | 自定义容器样式 |
+| `title` | `string` | 否 | `访问验证` | 标题文本 |
+| `placeholder` | `string` | 否 | `请输入访问密钥` | 输入框占位符 |
+| `buttonText` | `string` | 否 | `验证` | 按钮文本 |
+
+## 工作原理
+
+1. 组件首次加载时，会检查 localStorage 中是否存在该应用的密钥
+2. 如果存在，自动使用该密钥进行验证
+3. 验证成功且密钥等级不为 `none` 时，渲染子组件
+4. 验证失败时，显示密钥输入表单
+5. 用户输入密钥后，调用后端 API 进行验证
+6. 验证成功后，将密钥存储到 localStorage，并渲染子组件
+
+## 后端 API 要求
+
+组件需要后端提供一个密钥验证接口：
+
+**POST** `/api/public/keys/verify`
+
+请求体：
+```json
+{
+  "app_name": "my-app",
+  "key_value": "user-input-key"
+}
+```
+
+响应格式：
+```json
+{
+  "code": 200,
+  "message": "验证成功",
+  "data": {
+    "valid": true,
+    "level": "vip",
+    "expires_at": "2024-12-31T23:59:59Z",
+    "message": "密钥有效"
+  }
+}
+```
+
+## 密钥等级
+
+- `none`: 无权限（验证会失败）
+- `guest`: 游客
+- `vip`: VIP 用户
+- `super_vip`: 高级 VIP 用户
+
+## 开发
+
+### 本地开发和测试
+
+使用 Vite 开发服务器快速测试组件：
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器（自动打开浏览器）
+npm run dev
+```
+
+开发服务器会在 `http://localhost:3000` 启动，并提供多个示例供测试：
+
+- **基础示例**: 最简单的使用方式
+- **自定义示例**: 展示自定义配置选项
+- **多应用示例**: 展示如何处理多个应用
+
+**测试前准备：**
+
+1. 确保后端服务已启动（默认 `http://localhost:8080`）
+2. 在数据库中创建测试应用：
+   ```bash
+   # 使用后端 API 创建应用
+   POST /api/apps
+   {
+     "name": "my-app",
+     "remark": "测试应用"
+   }
+   ```
+3. 为应用创建密钥（等级不能为 `none`）：
+   ```bash
+   POST /api/keys
+   {
+     "app_id": 1,
+     "key_value": "test-key-123",
+     "level": "vip"
+   }
+   ```
+
+### 构建
+
+```bash
+# 构建用于发布的包（监听模式）
+npm run build:watch
+
+# 构建用于发布的包
+npm run build
+
+# 预览构建结果
+npm run preview
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+declare enum Level {
+    None = "none",
+    Guest = "guest",
+    VIP = "vip",
+    SuperVIP = "super_vip"
+}
+interface KeyGuardProps {
+    appName: string;
+    apiBaseUrl?: string;
+    children: ReactNode;
+    onValidated?: (level: Level) => void;
+    customStyle?: React.CSSProperties;
+    title?: string;
+    placeholder?: string;
+    buttonText?: string;
+}
+declare const KeyGuard: React.FC<KeyGuardProps>;
+
+export { KeyGuard, type KeyGuardProps, KeyGuard as default };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+declare enum Level {
+    None = "none",
+    Guest = "guest",
+    VIP = "vip",
+    SuperVIP = "super_vip"
+}
+interface KeyGuardProps {
+    appName: string;
+    apiBaseUrl?: string;
+    children: ReactNode;
+    onValidated?: (level: Level) => void;
+    customStyle?: React.CSSProperties;
+    title?: string;
+    placeholder?: string;
+    buttonText?: string;
+}
+declare const KeyGuard: React.FC<KeyGuardProps>;
+
+export { KeyGuard, type KeyGuardProps, KeyGuard as default };

package/dist/index.js

@@ -0,0 +1,200 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  KeyGuard: () => KeyGuard,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_axios = __toESM(require("axios"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var STORAGE_KEY_PREFIX = "apps_admin_key_";
+var KeyGuard = ({
+  appName,
+  apiBaseUrl = "http://localhost:8080",
+  children,
+  onValidated,
+  customStyle,
+  title = "\u8BBF\u95EE\u9A8C\u8BC1",
+  placeholder = "\u8BF7\u8F93\u5165\u8BBF\u95EE\u5BC6\u94A5",
+  buttonText = "\u9A8C\u8BC1"
+}) => {
+  const [isValidated, setIsValidated] = (0, import_react.useState)(false);
+  const [keyValue, setKeyValue] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [initializing, setInitializing] = (0, import_react.useState)(true);
+  const storageKey = `${STORAGE_KEY_PREFIX}${appName}`;
+  const verifyKey = async (key) => {
+    try {
+      const response = await import_axios.default.post(
+        `${apiBaseUrl}/api/public/keys/verify`,
+        {
+          app_name: appName,
+          key_value: key
+        }
+      );
+      const { data } = response.data;
+      if (data.valid && data.level && data.level !== "none") {
+        localStorage.setItem(storageKey, key);
+        if (onValidated && data.level) {
+          onValidated(data.level);
+        }
+        return true;
+      } else {
+        setError(data.message || "\u5BC6\u94A5\u65E0\u6548\u6216\u6743\u9650\u4E0D\u8DB3");
+        return false;
+      }
+    } catch (err) {
+      if (import_axios.default.isAxiosError(err) && err.response) {
+        setError(err.response.data?.message || "\u9A8C\u8BC1\u5931\u8D25");
+      } else {
+        setError("\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5");
+      }
+      return false;
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    const checkStoredKey = async () => {
+      const storedKey = localStorage.getItem(storageKey);
+      if (storedKey) {
+        const isValid = await verifyKey(storedKey);
+        if (isValid) {
+          setIsValidated(true);
+        } else {
+          localStorage.removeItem(storageKey);
+        }
+      }
+      setInitializing(false);
+    };
+    checkStoredKey();
+  }, [appName]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!keyValue.trim()) {
+      setError("\u8BF7\u8F93\u5165\u5BC6\u94A5");
+      return;
+    }
+    setError("");
+    setLoading(true);
+    const isValid = await verifyKey(keyValue);
+    if (isValid) {
+      setIsValidated(true);
+    }
+    setLoading(false);
+  };
+  if (initializing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...defaultContainerStyle, ...customStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultCardStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: loadingStyle, children: "\u9A8C\u8BC1\u4E2D..." }) }) });
+  }
+  if (isValidated) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...defaultContainerStyle, ...customStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultCardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: titleStyle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: handleSubmit, style: formStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "text",
+          value: keyValue,
+          onChange: (e) => setKeyValue(e.target.value),
+          placeholder,
+          style: inputStyle,
+          disabled: loading
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: errorStyle, children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", style: buttonStyle, disabled: loading, children: loading ? "\u9A8C\u8BC1\u4E2D..." : buttonText })
+    ] })
+  ] }) });
+};
+var defaultContainerStyle = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  backgroundColor: "#f5f5f5"
+};
+var defaultCardStyle = {
+  backgroundColor: "white",
+  padding: "2rem",
+  borderRadius: "8px",
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  width: "100%",
+  maxWidth: "400px"
+};
+var titleStyle = {
+  margin: "0 0 1.5rem 0",
+  fontSize: "1.5rem",
+  fontWeight: "600",
+  textAlign: "center",
+  color: "#333"
+};
+var formStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem"
+};
+var inputStyle = {
+  padding: "0.75rem",
+  fontSize: "1rem",
+  border: "1px solid #ddd",
+  borderRadius: "4px",
+  outline: "none",
+  transition: "border-color 0.2s"
+};
+var buttonStyle = {
+  padding: "0.75rem",
+  fontSize: "1rem",
+  fontWeight: "500",
+  color: "white",
+  backgroundColor: "#007bff",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  transition: "background-color 0.2s"
+};
+var errorStyle = {
+  color: "#dc3545",
+  fontSize: "0.875rem",
+  marginTop: "-0.5rem"
+};
+var loadingStyle = {
+  textAlign: "center",
+  color: "#666",
+  fontSize: "1rem"
+};
+var index_default = KeyGuard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KeyGuard
+});

package/dist/index.mjs

@@ -0,0 +1,165 @@
+// src/index.tsx
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STORAGE_KEY_PREFIX = "apps_admin_key_";
+var KeyGuard = ({
+  appName,
+  apiBaseUrl = "http://localhost:8080",
+  children,
+  onValidated,
+  customStyle,
+  title = "\u8BBF\u95EE\u9A8C\u8BC1",
+  placeholder = "\u8BF7\u8F93\u5165\u8BBF\u95EE\u5BC6\u94A5",
+  buttonText = "\u9A8C\u8BC1"
+}) => {
+  const [isValidated, setIsValidated] = useState(false);
+  const [keyValue, setKeyValue] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [initializing, setInitializing] = useState(true);
+  const storageKey = `${STORAGE_KEY_PREFIX}${appName}`;
+  const verifyKey = async (key) => {
+    try {
+      const response = await axios.post(
+        `${apiBaseUrl}/api/public/keys/verify`,
+        {
+          app_name: appName,
+          key_value: key
+        }
+      );
+      const { data } = response.data;
+      if (data.valid && data.level && data.level !== "none") {
+        localStorage.setItem(storageKey, key);
+        if (onValidated && data.level) {
+          onValidated(data.level);
+        }
+        return true;
+      } else {
+        setError(data.message || "\u5BC6\u94A5\u65E0\u6548\u6216\u6743\u9650\u4E0D\u8DB3");
+        return false;
+      }
+    } catch (err) {
+      if (axios.isAxiosError(err) && err.response) {
+        setError(err.response.data?.message || "\u9A8C\u8BC1\u5931\u8D25");
+      } else {
+        setError("\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5");
+      }
+      return false;
+    }
+  };
+  useEffect(() => {
+    const checkStoredKey = async () => {
+      const storedKey = localStorage.getItem(storageKey);
+      if (storedKey) {
+        const isValid = await verifyKey(storedKey);
+        if (isValid) {
+          setIsValidated(true);
+        } else {
+          localStorage.removeItem(storageKey);
+        }
+      }
+      setInitializing(false);
+    };
+    checkStoredKey();
+  }, [appName]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!keyValue.trim()) {
+      setError("\u8BF7\u8F93\u5165\u5BC6\u94A5");
+      return;
+    }
+    setError("");
+    setLoading(true);
+    const isValid = await verifyKey(keyValue);
+    if (isValid) {
+      setIsValidated(true);
+    }
+    setLoading(false);
+  };
+  if (initializing) {
+    return /* @__PURE__ */ jsx("div", { style: { ...defaultContainerStyle, ...customStyle }, children: /* @__PURE__ */ jsx("div", { style: defaultCardStyle, children: /* @__PURE__ */ jsx("div", { style: loadingStyle, children: "\u9A8C\u8BC1\u4E2D..." }) }) });
+  }
+  if (isValidated) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx("div", { style: { ...defaultContainerStyle, ...customStyle }, children: /* @__PURE__ */ jsxs("div", { style: defaultCardStyle, children: [
+    /* @__PURE__ */ jsx("h2", { style: titleStyle, children: title }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: formStyle, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: keyValue,
+          onChange: (e) => setKeyValue(e.target.value),
+          placeholder,
+          style: inputStyle,
+          disabled: loading
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
+      /* @__PURE__ */ jsx("button", { type: "submit", style: buttonStyle, disabled: loading, children: loading ? "\u9A8C\u8BC1\u4E2D..." : buttonText })
+    ] })
+  ] }) });
+};
+var defaultContainerStyle = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  backgroundColor: "#f5f5f5"
+};
+var defaultCardStyle = {
+  backgroundColor: "white",
+  padding: "2rem",
+  borderRadius: "8px",
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  width: "100%",
+  maxWidth: "400px"
+};
+var titleStyle = {
+  margin: "0 0 1.5rem 0",
+  fontSize: "1.5rem",
+  fontWeight: "600",
+  textAlign: "center",
+  color: "#333"
+};
+var formStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem"
+};
+var inputStyle = {
+  padding: "0.75rem",
+  fontSize: "1rem",
+  border: "1px solid #ddd",
+  borderRadius: "4px",
+  outline: "none",
+  transition: "border-color 0.2s"
+};
+var buttonStyle = {
+  padding: "0.75rem",
+  fontSize: "1rem",
+  fontWeight: "500",
+  color: "white",
+  backgroundColor: "#007bff",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  transition: "background-color 0.2s"
+};
+var errorStyle = {
+  color: "#dc3545",
+  fontSize: "0.875rem",
+  marginTop: "-0.5rem"
+};
+var loadingStyle = {
+  textAlign: "center",
+  color: "#666",
+  fontSize: "1rem"
+};
+var index_default = KeyGuard;
+export {
+  KeyGuard,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "apps-key-guard",
+  "version": "0.0.1",
+  "description": "A React component for key-based access control with localStorage caching",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts",
+    "build:watch": "tsup src/index.tsx --format cjs,esm --dts --watch",
+    "dev": "vite",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "key",
+    "access-control",
+    "guard",
+    "authentication"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}