fastapi vue前后端分离

### 部署 FastAPI 和 Vue.js 构建的前后端分离项目 #### 一、准备阶段 对于部署基于 FastAPI 的后端服务以及由 Vue.js 开发的前端应用，需先确保开发环境已配置完毕并测试通过。这包括确认 FastAPI API 接口能够正常响应请求[^1]。 #### 二、构建与打包前端资源 在完成前端应用程序编写之后，应当利用 npm 或 yarn 工具执行 `npm run build` 命令来编译生产版本的静态文件。这些文件通常会被放置于项目的 dist 文件夹内[^2]。 #### 三、设置反向代理服务器 为了使同一域名下的不同路径分别指向前端和后端的服务地址，在此推荐采用 Nginx 来作为反向代理服务器。Nginx 可以轻松处理来自客户端的所有 HTTP 请求并将它们分发给相应的服务实例。 以下是简单的 Nginx 配置示例： ```nginx server { listen 80; server_name localhost; location /api/ { proxy_pass http://localhost:8000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /path/to/vue/dist; try_files $uri $uri/ /index.html; } } ``` 上述配置中 `/api/` 路径下所有的请求都会被转发到运行着 FastAPI 应用程序的地方；而其他任何 URL 则会尝试匹配本地磁盘上的静态文件，如果找不到则返回 index.html 页面以便支持 HTML5 History Mode 下路由功能[^3]。 #### 四、启动后台进程管理工具 考虑到长时间稳定运行的需求，建议使用 Gunicorn 这样的 WSGI 容器配合 Uvicorn 启动 FastAPI 应用，并借助 Supervisord 等守护进程监控其状态变化情况。这样即使遇到意外崩溃也能自动重启恢复工作。 安装命令如下所示： ```bash pip install gunicorn uvicorn[standard] sudo apt-get install supervisor ``` 编辑 supervisord.conf 添加如下内容用于定义 fastapi 服务： ```ini [program:fastapi] command=/usr/local/bin/gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app -b unix:/tmp/fastapi.sock directory=/var/www/html/backend/ autostart=true autorestart=true stderr_logfile=/var/log/fasapi.err.log stdout_logfile=/var/log/fastapi.out.log environment=PATH="/home/user/.local/bin:%(ENV_PATH)s" user=nobody group=nogroup ``` 最后更新 Supervisor 并开启新加入的任务即可让 FastAPI 处于随时待命的状态等待接收来自外部世界的访问请求。

<think>好的，我需要帮助用户解决如何使用FastAPI和Vue结合CAS实现前后端分离的单点登录方案。首先，我需要理解用户的需求。用户希望在前端使用Vue，后端使用FastAPI，并通过CAS协议实现SSO。用户可能已经了解CAS的基本流程，但需要具体的实现步骤。 首先，我应该回顾CAS的单点登录流程，确保自己理解正确。根据引用[1]，CAS的流程大致是：用户访问应用系统，未登录则跳转到CAS服务器（SSO系统），登录后生成ST，应用系统验证ST后建立本地会话。这个过程需要前后端分离的情况下，前端和后端如何协调处理。 接下来，我需要考虑前后端分离架构的特点。前端Vue应用通常运行在浏览器中，通过API与后端FastAPI通信。在CAS流程中，前端需要处理重定向到CAS登录页面，获取ST，并将ST传递给后端验证。同时，前后端的Cookie管理需要注意域的问题，因为Vue可能部署在不同的域下。 然后，我需要分解实现步骤。首先，CAS服务器的配置可能需要，但用户可能已经有一个CAS服务器，或者需要搭建一个。假设用户需要从头开始，可能需要使用现有的CAS服务器实现，或者使用FastAPI模拟部分CAS功能。不过更可能的是，用户希望集成现有的CAS系统，比如Apereo CAS。 接下来，规划前端Vue部分的处理。当用户访问Vue应用时，前端需要检查是否已登录。如果未登录，应跳转到CAS的登录页面。这里需要注意，前端如何检测登录状态。由于前后端分离，前端可能通过调用后端API来检查登录状态，后端返回未认证时，前端触发重定向。 对于后端FastAPI，需要处理ST的验证。当CAS登录成功后，会重定向回Vue前端，并携带ST参数。前端需要将ST发送到后端，后端再向CAS服务器验证ST的有效性，验证成功后建立会话，并返回Cookie给前端。 这里需要考虑跨域问题，因为Vue前端和FastAPI后端可能部署在不同的域。因此，需要配置CORS，确保前后端可以正确通信。同时，在CAS的重定向过程中，ST参数需要从前端传递到后端，可能需要通过URL参数或者前端将ST作为请求参数发送到后端API。 另外，关于会话管理，FastAPI后端在验证ST有效后，需要创建用户会话，并返回Set-Cookie头部，但由于跨域限制，可能需要前端处理Cookie的存储和发送。或者，使用Token-based身份验证，如JWT，避免依赖Cookie。但根据引用[1]，CAS通常使用Cookie来维持会话，所以可能需要调整。 需要明确前后端的交互流程： 1. 用户访问Vue前端，前端检查登录状态（调用后端API）。 2. 后端返回未登录，前端重定向到CAS登录页面。 3. 用户登录CAS，CAS生成ST并重定向回前端指定的URL（比如Vue的路由），携带ST。 4. 前端获取ST后，发送给后端验证。 5. 后端向CAS服务器验证ST，获取用户信息，建立会话，返回认证成功的响应。 6. 前端保存后端的会话Cookie或Token，后续请求携带该凭证。 这里可能存在的挑战包括跨域重定向的处理，ST的传递和验证，以及会话的维持方式。需要确保CAS服务器配置正确的回调URL，允许Vue前端和后端的域。 在代码实现方面，FastAPI后端需要提供以下几个端点： - 检查登录状态的API（如/auth/status） - 处理CAS回调的API，接收ST，验证ST，并建立会话（如/auth/cas-login） Vue前端需要处理： - 在路由守卫中检查登录状态，未登录则跳转CAS - 处理CAS回调页面，解析ST参数并发送到后端验证 此外，安全性方面需要考虑ST的一次性使用，防止重放攻击，以及HTTPS的使用确保传输安全。引用[2]提到系统支持安全策略，可能可以参考其中的密码策略和访问限制。 最后，生成相关问题需要考虑用户在实现过程中可能遇到的细节问题，比如跨域配置、ST验证的具体实现、前端路由处理等。</think>### 分步解决方案 以下是使用 **FastAPI** 和 **Vue** 结合 **CAS** 实现前后端分离单点登录（SSO）的分步方案： --- ### 1. **整体流程设计** 1. **用户访问 Vue 前端**，前端向后端发送请求检查登录状态。 2. **未登录时**，前端重定向到 CAS 登录页面（携带 `service` 参数为后端验证接口地址）。 3. **CAS 认证成功后**，生成 ST（Service Ticket），重定向到 Vue 前端指定路由（如 `/cas-callback`）并携带 ST。 4. **Vue 前端将 ST 发送给 FastAPI 后端**，后端向 CAS 验证 ST 有效性。 5. **验证通过后**，FastAPI 生成用户会话（返回 JWT 或设置 Cookie），前端存储凭证，完成登录。 --- ### 2. **FastAPI 后端实现** #### (1) 配置 CAS 客户端信息 ```python # config.py CAS_SERVER = "https://sso.example.com" CAS_VALIDATE_URL = f"{CAS_SERVER}/serviceValidate" SERVICE_CALLBACK = "http://api.your-app.com/auth/cas-login" # 后端验证接口 ``` #### (2) 定义路由处理 CAS 回调 ```python # main.py from fastapi import FastAPI, Request, Depends from fastapi.responses import RedirectResponse import httpx app = FastAPI() @app.get("/auth/cas-login") async def cas_login(request: Request, ticket: str): # 向 CAS 验证 ST async with httpx.AsyncClient() as client: response = await client.get( CAS_VALIDATE_URL, params={"ticket": ticket, "service": SERVICE_CALLBACK} ) # 解析 CAS 响应（假设返回 XML） if "authenticationSuccess" in response.text: # 提取用户名，生成 JWT 或设置 Cookie username = extract_username(response.text) token = generate_jwt(username) return {"token": token} # 或通过 Set-Cookie 返回 else: return {"error": "ST 验证失败"} ``` #### (3) 跨域配置（CORS） ```python # main.py from fastapi.middleware.cors import CORSMiddleware app.add_middleware( CORSMiddleware, allow_origins=["http://vue-app.com"], # Vue 前端域名 allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) ``` --- ### 3. **Vue 前端实现** #### (1) 登录状态检查与重定向 ```javascript // src/router/index.js router.beforeEach(async (to, from, next) => { const isAuthenticated = await checkAuthStatus(); // 调用 /auth/status 接口 if (to.meta.requiresAuth && !isAuthenticated) { window.location.href = `https://sso.example.com/login?service=${encodeURIComponent('http://api.your-app.com/auth/cas-login')}`; } else { next(); } }); ``` #### (2) 处理 CAS 回调页面 ```vue <!-- src/views/CasCallback.vue --> <script> export default { mounted() { const ticket = this.$route.query.ticket; if (ticket) { this.$axios.post('/auth/cas-login', { ticket }) .then(res => { localStorage.setItem('token', res.token); // 存储 Token this.$router.push('/'); }); } } } </script> ``` --- ### 4. **CAS 服务器配置** 1. **注册服务**：在 CAS 服务器中注册后端验证地址（`http://api.your-app.com/auth/cas-login`），确保 ST 只能被该服务使用[^1]。 2. **配置安全策略**：启用 HTTPS、设置 ST 有效期（如 10 秒）、限制重复使用[^2]。 --- ### 5. **测试与调试** 1. **跨域问题**：确保 FastAPI 的 CORS 配置允许 Vue 前端域名。 2. **ST 传递**：检查 CAS 回调时 ST 是否通过 URL 参数正确传递到 Vue 前端。 3. **会话管理**：使用 `SameSite` 和 `Secure` 标记保护 Cookie，或采用 JWT 无状态方案。 --- ### 相关问题 1. **如何处理 CAS 返回的 XML/JSON 数据？** FastAPI 需解析 CAS 验证响应（如使用 `xmltodict` 库），提取用户信息。 2. **如何实现前端无感刷新 Token？** Vue 可通过 Axios 拦截器自动续期 JWT。 3. **CAS 集成时如何保证安全性？** 需启用 HTTPS、限制 ST 有效期、验证服务地址白名单。 --- 通过上述步骤，可基于 FastAPI 和 Vue 实现符合 CAS 协议的前后端分离单点登录方案。