watchEffect监听token变化自动跳转登录页，需配合拦截器或定时校验实现过期检测，避免重复跳转需判断当前路由路径。
在 Vue 3 中，用 watchEffect 监听登录状态（比如 Token）并自动跳转登录页，核心思路是：**监听 token 的响应式变化，一旦失效（为空、过期或校验不通过），立即触发路由跳转**。但要注意——watchEffect 本身不感知“过期时间”，它只响应数据变更；Token 过期逻辑需配合存储方式（如 localStorage）、拦截器或定时校验来协同实现。
监听 Token 状态并响应跳转
假设你把 token 存在 Pinia store 或 ref 中（推荐 Pinia），且有一个计算属性或 getter 判断是否“已登录”或“token 有效”：
- 确保 token 是响应式的（例如
useAuthStore().token是一个ref或computed） -
watchEffect会自动追踪其依赖，只要 token 改变（比如被清空），回调就会执行 - 在回调中调用
router.push('/login')，注意要先获取路由实例
示例代码（组合式 API + Pinia + Vue Router）：
import { watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
<p>export default {
setup() {
const router = useRouter()
const authStore = useAuthStore()</p><pre class="brush:php;toolbar:false;">watchEffect(() => {
// 直接读取 token，触发依赖收集
const token = authStore.token
// 如果 token 为空、无效，或明确标记为已过期
if (!token || !authStore.isValid) {
// 避免重复跳转（比如已在登录页）
if (router.currentRoute.value.path !== '/login') {
router.push('/login')
}
}
})
return {}} }
配合 token 过期主动检测（关键补充）
watchEffect 不会主动检查 token 是否过期，它只响应赋值变化。所以你需要让“过期”这件事真正导致 token 值更新，常见做法有：
立即学习“前端免费学习笔记（深入）”；
-
请求拦截器中校验：用 axios 拦截器在每次请求前解析 token 的 exp 字段，若已过期，清空 store 中的 token（触发
watchEffect） -
页面加载时校验：在
main.js或根组件中，读取 localStorage 的 token，解析 JWT，检查 exp，过期则清除并重置状态 -
后台返回 401 时统一处理：响应拦截器捕获 401，调用
authStore.logout()，内部设token = null，自然触发 watchEffect
避免无限跳转和重复触发
跳转逻辑容易陷入循环，尤其在登录页也执行了该 watchEffect 时：
- 加路径守卫判断：
if (router.currentRoute.value.path !== '/login') - 使用
watchEffect的清理函数（可选），在跳转前取消未完成的副作用（较少需要） - 确保
logout()方法只清空 token 一次，不要在跳转后又触发新 watch - 如果用
router.replace替代push，可避免登录页出现在历史栈中
进阶：监听 token 有效期倒计时（可选）
若想更早干预（比如提前 30 秒提醒或自动刷新），可以额外起一个定时器，基于 token 的 exp 计算剩余时间，并在临界点调用 authStore.refreshToken() 或强制登出：
watchEffect((onInvalidate) => {
const token = authStore.token
if (token) {
const exp = parseJwt(token).exp * 1000
const remaining = exp - Date.now()
if (remaining < 30_000) {
// 提前 30s 尝试刷新，失败则清空 token
authStore.refreshToken().catch(() => authStore.logout())
}
}
})不复杂但容易忽略的是：watchEffect 的响应性依赖于你读取的值是否真能被 Vue 追踪。只要 token 是 ref/computed/getter，且过期时确实改变了它的值，这套机制就能可靠工作。
