Vue.js 不能直接渲染 Symfony 的 Twig 模板，但可通过消费其 JSON API 实现前后端分离；需禁用 Twig 渲染、统一错误响应格式、封装带 CSRF 和错误处理的 apiClient、正确配置跨域 Cookie 与权限同步机制。
Vue.js 不能直接渲染 Symfony 的 Twig 模板，但可以完美消费 Symfony 提供的 JSON API —— 关键不在“集成”，而在“职责分离”。
Symfony 怎么暴露干净的 API 接口
默认 Symfony 项目带 symfony/serializer 和 symfony/web-link，但容易漏掉两件事：禁用 Twig 渲染、统一错误格式。
- 在控制器里别用
render()，改用json()（Symfony 6.2+）或new JsonResponse()；否则返回 HTML，Vue 拿到的是字符串而非对象 - 全局配置
framework.json_request为true，否则request->toArray()可能解析失败 - 400+ 错误默认返回 HTML 页面，需配
error_controller: 'error_controller::show'并返回JsonResponse，否则 Vue 的catch拿到的是 200 状态码 + HTML 文本
Vue.js 怎么安全发起请求并处理响应
别直接用 fetch 手写重复逻辑 —— 状态码判断、token 注入、错误解包都得收口。
- 封装一个
apiClient，自动读取document.querySelector('meta[name="csrf-token"]')并塞进X-CSRF-Token头 -
response.status === 422时，后端通常返回{"violations": [...]}，前端别直接console.error(data)，要映射到表单项的v-model对应字段 - 避免在
mounted()里调用await api.get('/api/posts')后直接赋值给ref—— 若组件已卸载，会触发 “Cannot update a component while unmounting” 警告；加个isMounted标志位更稳妥
CSRF 和 session 怎么跨域协同
开发时 Vue 在 localhost:5173，Symfony 在 localhost:8000，默认 Cookie 不携带，credentials: 'include' 是必须项，但还不够。
立即学习“前端免费学习笔记（深入）”；
- Symfony 需设
framework.session.cookie_samesite: 'lax'或'none'（后者要求 HTTPS） - 前端
fetch必须显式传{ credentials: 'include' }，否则Set-Cookie被浏览器静默丢弃 - 若用 Axios，别只配
withCredentials: true，还要确保baseURL是完整 URL（如'http://localhost:8000'），否则相对路径请求不带 Cookie
怎么让 Vue 组件知道当前用户权限
别在前端硬编码角色字符串（如 'ROLE_ADMIN'），也不该每次操作都查一次 /api/user。
- 登录成功后，Symfony 在
json()响应里附带user.roles和user.id，Vue 存进pinia或localStorage（注意敏感字段别存密码哈希） - 后端路由加
@IsGranted('ROLE_EDITOR')是必须的，前端v-if="user.roles.includes('ROLE_EDITOR')"只是体验优化，不是权限控制 - 如果权限变更（如管理员后台踢人），前端不会自动感知 —— 要么加 SSE 订阅
/api/events/permissions，要么在关键操作前主动GET /api/user/refresh
真正卡住人的从来不是“怎么连通”，而是错误响应没按 JSON 格式吐、CSRF token 漏传、或者把权限校验逻辑错放在前端。这些地方一松动，后面全是连锁报错。
