Vue 3 watchEffect 怎么处理登录状态的自动凭证校验-Vue.js-PHP中文网

watcheffect适合在组件内自动响应凭证变化并执行一次校验，如登录页token就绪即验证、调试时localstorage变更实时响应、配合pinia状态更新loading/error；但它不能替代路由守卫或全局拦截器。

vue 3 watcheffect 怎么处理登录状态的自动凭证校验

用 watchEffect 处理登录状态的自动凭证校验，核心不是“监听 token”，而是**让校验逻辑自动响应凭证变化，并在组件生命周期内安全执行**。它适合做“状态就绪即验证”的轻量联动，但不能替代路由守卫或 Pinia 全局状态管理这类主链路控制。

什么时候该用 watchEffect 做凭证校验

适用于以下具体场景：

登录页或首页组件中，需要在 token 或 user 状态一就绪就发起一次验证请求（比如检查 token 是否过期、是否被吊销）
用户修改了本地存储的 token（如调试时手动改 localStorage），希望 UI 实时响应验证结果
配合 Pinia store 中的 token 和 isChecking 等状态，自动触发并更新 loading/error 状态

怎么写：基础结构 + 关键细节

假设你用 Pinia 管理用户状态，store 中有：

const userStore = useUserStore()
userStore.token // string | null
userStore.user // object | null
userStore.isChecking // boolean

在组件中可以这样写：

① 自动追踪 token 变化并发起校验

watchEffect 会立即执行一次，之后只要 userStore.token 改变（包括从 null → token、token → null），就会重新运行：

watchEffect(async () => {
  if (!userStore.token) return
  userStore.isChecking = true
  try {
    const res = await api.verifyToken(userStore.token)
    if (!res.valid) {
      userStore.clear() // 清除无效凭证
    } else {
      userStore.setUser(res.user)
    }
  } catch {
    userStore.clear()
  } finally {
    userStore.isChecking = false
  }
})

vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

网站特效

网站源码

网站素材

前端模板