# standalone-app-template

**Repository Path**: lijialuo/standalone-app-template

## Basic Information

- **Project Name**: standalone-app-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-12
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Standalone App Template

独立前端项目模板 — 基于 jtxk-cloud IAM 统一认证和菜单。

## 快速开始

```bash
# 1. 复制模板
cp -r standalone-app-template my-new-app
cd my-new-app

# 2. 修改 .env
VITE_APP_CODE=你的应用编码
VITE_APP_CLIENT_ID=你的clientId
VITE_APP_CLIENT_SECRET=你的clientSecret
VITE_REDIRECT_URI=http://你的域名/callback
VITE_APP_TITLE=你的应用名称
# ⚠️ client_secret 在前端暴露有安全风险，生产环境建议由后端代理 /oauth2/token 调用

# 3. 在 IAM 平台注册
#    - 应用管理 → 添加应用（appType=独立部署Web）
#    - 回调地址填 VITE_REDIRECT_URI
#    - 应用资源管理 → 配菜单（component 填 views/xxx.vue 路径）

# 4. 安装依赖并启动
npm install && npm run dev

# 5. 写业务页面
#    src/views/ 目录下创建 Vue 文件即可
#    菜单里的 component 会自动映射到这里的文件
```

## 目录结构

```
src/
├── main.ts          ← 入口（不改）
├── App.vue          ← 根组件（不改）
├── router/index.ts  ← 动态路由（不改）
├── stores/auth.ts   ← 认证状态 + SSO 逻辑（不改）
├── api/index.ts     ← HTTP 客户端 + 菜单 API（不改）
├── layouts/MainLayout.vue ← 侧边栏 + 顶栏布局
└── views/           ← 🔥 你的业务页面（只改这里）
    ├── home.vue
    ├── ...
    └── callback.vue / not-found.vue（不改）
```

## 不变的部分（骨架）

- SSO 登录流程（无 token → 跳 IAM → code 回调 → 换 token）
- 菜单动态加载（调 IAM API，生成 Vue Router）
- HTTP 拦截器（自动带 token，401 跳登录）
- 回调处理页
- 布局框架

## 变化的部分（业务）

- `src/views/` 下的 Vue 页面
- `.env` 里的应用标识

## 接入 IAM 平台的操作

1. 开发运营系统 → 应用列表 → 添加应用（选"独立部署Web"）
2. 创建后拿到 client_id 和 secret（仅显示一次）
3. 进入该应用的"资源管理" → 添加菜单
4. 应用资源授权 → 授权给目标租户
5. 目标租户的用户登录后即可看到该应用