@laterinc/query-kit-auth

JWT 认证适配器，配合 @laterinc/query-kit 使用，支持 Token 刷新、加密存储、会话超时。

安装

pnpm add @laterinc/query-kit-auth @laterinc/query-kit @tanstack/react-query react

快速开始

import { QueryKitProvider } from '@laterinc/query-kit';
import { createJwtAuthAdapter } from '@laterinc/query-kit-auth';

const adapter = createJwtAuthAdapter({
  refreshTokenUri: '/api/v1/auth/refresh',
  baseURL: 'https://api.example.com',
  loginUrl: '/login',
});

<QueryKitProvider config={{
  baseURL: 'https://api.example.com',
  auth: { adapter },
}}>
  <App />
</QueryKitProvider>

登录

import { useAuthStore } from '@laterinc/query-kit-auth';

const response = await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ username, password }),
});
const { accessToken, refreshToken, expiresIn } = await response.json();

useAuthStore.getState().setAuth(
  { accessToken, refreshToken, expiresIn },
  { id: '1', username, firstName: 'John', lastName: 'Doe', email }
);

配置

加密存储

createJwtAuthAdapter({
  refreshTokenUri: '/api/auth/refresh',
  authStoreConfig: {
    encryptionKey: process.env.NEXT_PUBLIC_ENCRYPTION_KEY,
    enableStorageEncryption: true,
  },
});

会话超时

authStoreConfig: {
  sessionTimeout: 30 * 60 * 1000, // 30 分钟无操作自动登出
}

sessionStorage

authStoreConfig: {
  storageType: 'sessionStorage', // 关闭标签页即失效
}

API

| 导出 | 说明 | |------|------| | createJwtAuthAdapter | 创建 JWT AuthAdapter | | useAuthStore | Zustand store，管理登录状态 | | initializeAuthStore | 初始化配置 | | subscribeAuthChange | 订阅登录状态变化 | | useTokenExpiryMonitor | 监控 Token 过期时间 | | clearAuthStorage | 清空存储 |

License

MIT