Vue3钉钉授权登录状态同步需构建闭环链路：登录后立即更新Pinia响应式状态，安全持久化token（httpOnly Cookie）与用户信息（localStorage加密存储），路由守卫校验并兜底静默授权，登出时前后端协同清理全链路状态。
Vue 3 中实现钉钉授权登录后的状态同步，核心在于「前端感知登录结果」+「持久化用户凭证」+「响应式更新全局状态」，不是简单存个 token 就完事，而是要让整个应用知道“谁登了、登没登稳、登的是谁”。
登录成功后立即更新响应式状态
不要等跳转或刷新才更新状态。在拿到钉钉回调 code 并完成后端鉴权返回用户信息后，立刻用 pinia 或 ref 更新登录态：
- 定义一个 store（如 useAuthStore），包含 isLogin、userInfo、accessToken 等字段
- 在 handleCallback 成功回调里调用 store.login({ userInfo, accessToken })
- 所有依赖登录态的组件（如顶部导航栏、权限按钮）用 store.isLogin 或 computed(() => !!store.userInfo) 做响应式判断
Token 和用户信息必须安全持久化
仅靠内存变量无法应对页面刷新。需结合存储策略保证状态不丢失：
- 推荐使用 localStorage + 加密前缀（如
__dd_user_）存 userInfo，避免被其他脚本误读 - access_token 建议存入 httpOnly Cookie（由后端下发），前端只通过 API 自动携带，不直接读写
- 首次加载时，在 main.ts 或根组件 onMounted 中检查本地是否有有效用户数据，并触发 store 的 restoreFromStorage 方法
拦截未登录访问，自动补全授权流程
用户直接输入后台地址、或刷新页面时，需主动校验并兜底：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 路由守卫（router.beforeEach）中检查 store.isLogin === false 且当前路径非登录页
- 若检测到钉钉环境（
typeof dd !== 'undefined'），可静默触发 dd.runtime.permission.requestAuthCode 获取 code - 若不在钉钉环境，但 localStorage 有用户信息，可走「免密续登」逻辑（调用后端验证 token 有效性）
- 以上任一失败，才重定向至钉钉 OAuth 授权页（
https://login.dingtalk.com/oauth2/auth）
登出时彻底清理双端状态
登出不是清空 store 就结束，必须前后端协同：
- 前端调用后端登出接口（如
POST /api/auth/logout），通知服务端销毁 session/token - 登出成功后，store 清空所有字段，并从 localStorage 删除用户相关键值
- 如有使用 DTFrameLogin 或 iframe 二维码组件，需手动调用其销毁方法（如
window.DTFrameLogin.destroy()）防止残留监听 - 最后跳转至登录页或首页，避免停留在受保护路由
关键点在于：状态同步不是单向赋值，而是「登录动作→存储写入→store 更新→视图响应→路由拦截→异常兜底」的闭环。只要这个链路每一步都可控，钉钉授权后的登录态就能稳稳跟住用户操作。
