Front Template

基于 React + Vite 的前端应用模板，已集成 SSO 单点登录功能。

特性

• ✅ SSO 单点登录 - 统一使用认证门户进行登录
• ✅ 自动跳转 - 未登录时自动跳转到认证门户
• ✅ Token 管理 - 自动从 URL hash 提取 token
• ✅ 统一注销 - 退出登录统一跳转到认证门户

技术栈

• React 19 + TypeScript
• Vite - 构建工具
• shadcn/ui - UI 组件库
• TanStack Query - 数据获取
• Zustand - 状态管理
• React Router DOM v7 - 路由
• Tailwind CSS - 样式

如何使用此模板

1. 复制模板：

   cp -r apps/front-template apps/your-app-name

2. 修改配置：

   • 修改 package.json 中的 name 字段
   • 修改 vite.config.ts 中的端口（建议使用 8000+）
   • 修改 vite.config.ts 中的 VITE_AUTH_PORTAL_URL（如果需要）

3. 自定义应用：

   • 修改 src/pages/dashboard/Home.tsx - 你的 Dashboard 页面
   • 修改 src/components/layouts/DashboardLayout.tsx - 你的布局
   • 添加你的业务页面和路由

环境变量

可选：

• VITE_API_URL - 后端 API 地址（开发环境自动使用代理）
• VITE_AUTH_PORTAL_URL - 认证门户 URL（开发环境默认 http://localhost:7777）

开发

pnpm dev

构建

pnpm build

部署

pnpm deploy

SSO 集成说明

1. 路由守卫

使用 ProtectedRoute 组件保护需要登录的路由：

import { ProtectedRoute } from '@/components/auth/ProtectedRoute'

<ProtectedRoute>
  <YourPage />
</ProtectedRoute>

2. 退出登录

退出登录会自动跳转到认证门户：

import { useLogout } from '@/hooks/queries/auth'
import { redirectToAuthPortalForLogout } from '@fullstackpack/shared'
import { AUTH_PORTAL_URL } from '@/constants'

const logoutMutation = useLogout()

const handleLogout = async () => {
  await logoutMutation.mutateAsync()
  redirectToAuthPortalForLogout(AUTH_PORTAL_URL)
}

3. 获取用户信息

import { useAuth } from '@/hooks/queries/auth'

const { user, isAuthenticated } = useAuth()