组合式函数可实现登录凭证持久化：usepersistenttoken专注token字符串的读取、响应式绑定与自动同步，支持自定义存储键名和storage实例；useusersession在此基础上组合用户态管理，封装登录、登出等逻辑，兼顾复用性与安全性。
用组合式函数处理登录凭证持久化，核心是把“读取→响应式绑定→变更同步→类型安全”串成一条线，不依赖 Pinia 也能干净落地。
封装 usePersistentToken：专注凭证本身
只管 token 字符串，不掺杂用户信息或业务逻辑，适合轻量项目或组件内独立认证场景：
- 接收存储键名（如 'auth-token'）、默认值、可选 storage 实例（localStorage 或 sessionStorage）
- 内部自动处理 JSON 序列化（兼容对象 token），但默认按字符串存取更贴合 JWT 场景
- 返回一个 ref，直接解构使用，响应式更新会立刻写入 storage
示例代码：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
import { ref, watchEffect, onMounted } from 'vue'
export function usePersistentToken(key = 'auth-token', defaultValue = '', storage = localStorage) {
const token = ref('')
// 初始化：从 storage 读取并赋值
onMounted(() => {
const saved = storage.getItem(key)
token.value = saved ? JSON.parse(saved) : defaultValue
})
// 变更监听：自动写入 storage
watchEffect(() => {
if (token.value === '') {
storage.removeItem(key)
} else {
storage.setItem(key, JSON.stringify(token.value))
}
})
return token
}
搭配 useUserSession：组合用户态与凭证
当需要同时管理 token 和 userInfo（比如刷新后拉取用户数据），可再包一层组合式函数，复用上面的 token 管理，同时封装 fetchUserInfo、logout 等动作：
- 内部调用 usePersistentToken 管 token
- userInfo 单独用另一个 usePersistentState（支持对象序列化）或手动同步到 localStorage
- 提供 login()、logout()、refresh() 方法，逻辑收口清晰
这样既保持组合式函数的可复用性，又避免 store 膨胀，适合中型项目或多个子应用共享认证逻辑。
注意边界和安全细节
组合式函数灵活，但也容易忽略关键点：
- 不要存敏感字段：token 本身已含权限信息，别额外存密码、密钥等；若需更高安全，应配合 HttpOnly Cookie + 后端校验
- 区分 storage 类型：公共设备用 sessionStorage，个人设备长期登录用 localStorage，别混用
- 处理初始化时机：onMounted 里读取是常规做法，但 SSR 场景需加 typeof window !== 'undefined' 判断
- token 过期检查要交还给后端：前端仅做存在性判断，401 响应统一由 axios 拦截器捕获并触发 logout
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
