要让Codex项目支持用户注册登录功能，必须先确认后端API已提供标准JWT认证接口，并确保前端能正确发起请求、存储令牌、处理跳转逻辑；配置Pinia与路由、实现Token持久化、添加路由守卫及请求拦截器缺一不可。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要让Codex项目支持用户注册登录功能，必须先确认后端API已提供标准的JWT认证接口，并确保前端能正确发起请求、存储令牌、处理跳转逻辑。缺少任意一环都会导致登录成功但页面无响应或后续请求被拒绝。
配置前端环境与基础路由
在src/main.ts中引入createPinia()并挂载，Pinia是管理用户登录态的核心依赖；不引入会导致登录后无法全局读取token。
创建src/router/index.ts，定义/login和/dashboard两个基础路由，其中/dashboard需添加meta: { requiresAuth: true }标识——这是后续守卫拦截未登录访问的关键标记。
这一步操作起来很简单，直接把文件拖进去就行。
实现登录接口调用与Token持久化
方法一：使用组合式API + useAuthStore
在src/stores/auth.ts中定义Pinia store，包含login、logout、setToken三个动作；setToken内部必须同时写入localStorage和pinia state——只存state会导致刷新丢失，只存localStorage会导致响应式失效。
方法二：直接在Login.vue中调用Axios
用axios.post('/api/auth/login', { email, password })提交表单；响应成功后立即执行localStorage.setItem('auth_token', res.data.token)；【务必检查res.data.token是否存在，空值会导致后续所有请求携带无效Authorization头】。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
添加全局路由守卫控制访问权限
第一步：在src/router/index.ts顶部导入createRouter和createWebHistory；
第二步：调用router.beforeEach，判断目标路由是否需要认证（to.meta.requiresAuth）；
第三步：若需要认证，检查localStorage.getItem('auth_token')是否为空；为空则重定向到/login，否则放行；
第四步：在src/main.ts中确保app.use(router)在app.use(pinia)之后执行——顺序错误会导致守卫中无法读取store状态。
在请求拦截器中自动注入Token
在src/utils/request.ts中配置Axios拦截器：instance.interceptors.request.use回调里读取localStorage.getItem('auth_token')，若存在则设置config.headers.Authorization = `Bearer ${token}`；
这一步漏掉会导致所有受保护接口返回401，即使登录成功也无法获取用户数据。
不需要手动在每个API调用里拼Header，拦截器会统一处理。
