kay1759/web-utils
GitHub: kay1759/web-utils
为 React 应用提供 CSRF 处理、JWT 工具、Apollo GraphQL 封装和 React Router 兼容 HTTP 响应的轻量 TypeScript 工具库。
Stars: 0 | Forks: 0
# @kay1759/web-utils
适用于 React 应用的可复用 TypeScript 工具库，提供 CSRF 处理、Apollo GraphQL 辅助工具、JWT 实用工具以及兼容 React Router 的响应。
本库提供以下轻量级辅助工具：
- CSRF token 处理
- GraphQL (Apollo Client 集成)
- JWT 解码
- HTTP 响应辅助工具 (兼容 React Router)
## ✨ 功能特性
- 🔐 带缓存和去重功能的 CSRF token 管理
- 🔗 Apollo Client 集成 (auth link + 辅助工具)
- 🪪 JWT 解码和过期检查
- 🌐 兼容 React Router v7 的 HTTP 辅助工具
- 🧪 使用 Vitest 完全测试
- 📦 TypeScript 优先，提供完整的类型定义
## 📦 安装
```
npm install @kay1759/web-utils
```
适用于使用 Apollo Client 和 React Router 的现代 React 应用程序。
## 🚀 快速开始
```
import {
configureCsrf,
createApolloClient,
queryGraphQL,
} from "@kay1759/web-utils";
import { HttpLink } from "@apollo/client";
configureCsrf({ endpoint: "/csrf" });
const client = createApolloClient(
new HttpLink({
uri: "/graphql",
credentials: "include",
})
);
// fetch data with CSRF automatically handled
const data = await queryGraphQL(client, QUERY);
```
## 🔐 CSRF 客户端
配置一次，然后在需要时获取 token。
```
import { configureCsrf, getCsrfToken } from "@kay1759/web-utils";
configureCsrf({
endpoint: "/csrf",
});
const token = await getCsrfToken();
```
### 特性
- 缓存 token
- 对并发请求进行去重
- 可选的强制刷新
```
await getCsrfToken(true); // force refresh
```
## 🔗 GraphQL (Apollo Client)
### 创建带 CSRF 支持的 Apollo Client（推荐）
自动将 CSRF token 附加到所有请求。
```
import { createApolloClient } from "@kay1759/web-utils";
import { HttpLink } from "@apollo/client";
const httpLink = new HttpLink({
uri: "/graphql",
credentials: "include",
});
const client = createApolloClient(httpLink);
```
### Query 辅助工具
```
import { queryGraphQL } from "@kay1759/web-utils";
const data = await queryGraphQL(client, QUERY, { id: 1 });
```
### Mutation 辅助工具
```
import { mutateGraphQL } from "@kay1759/web-utils";
const result = await mutateGraphQL(client, MUTATION, {
name: "Alice",
});
```
## 🪪 JWT 实用工具
### 解码 JWT
```
import { decodeJwt } from "@kay1759/web-utils";
const payload = decodeJwt(token);
```
### 检查过期时间
```
import { isExpired } from "@kay1759/web-utils";
if (isExpired(payload)) {
// token expired
}
```
## 🍪 Token 存储
```
import { configureAuthToken, setToken, getToken } from "@kay1759/web-utils";
configureAuthToken({
cookieName: "auth_token",
});
setToken({ token: "my-token" });
const token = getToken();
```
## 🌐 HTTP 辅助工具 (兼容 React Router v7)
```
import { json, redirect, error } from "@kay1759/web-utils";
return json({ ok: true });
throw redirect("/login");
throw error(404, "Not found");
```
## 🧱 项目结构
```
src/
├── auth/
│ ├── jwt.ts
│ └── token.ts
├── csrf/
│ └── client.ts
├── graphql/
│ ├── authLink.ts
│ ├── client.ts
│ └── execute.ts
├── http/
│ └── response.ts
└── index.ts
```
## 🧪 测试
```
npm test
```
## 📚 文档
使用 TypeDoc 生成 API 文档：
```
npx typedoc
```
## ⚙️ 环境要求
- Node.js 18+
- TypeScript 5+
- Apollo Client 4+
- React Router v7 (可选)
## 🤝 贡献
欢迎提交 PR。
## 📄 许可证
MIT
标签：Apollo Client, CISA项目, CSRF防护, DNS解析, GraphQL, HTTP请求, JWT认证, Linux取证, NPM包, OSV-Scalibr, React, React Router, Syscall, Syscalls, TypeScript, Web安全, Web开发, 前端组件, 单页应用, 安全插件, 安全防护, 工具库, 开源项目, 自动化攻击, 蓝队分析, 路由管理