Vue JS中登录JWT token处理方案：删除localStorage中token未自动登出如何解决

你当前的校验逻辑仅在组件初始化的created钩子中执行一次，Vue本身不会自动监听localStorage的原生改动，因此手动删除token后不会主动触发登出逻辑。另外你原有代码的登录校验请求仅发起了调用，没有对接口返回的无效状态、请求错误做处理，也会导致token失效后没有跳转登录。

这里提供三种常用的实现方案，可结合业务场景搭配使用：

方案1：封装统一token操作工具（最推荐） #

所有对token的增删改操作都走封装的公共方法，删除token时直接同步执行登出逻辑，避免遗漏。

// src/utils/auth.js 全局token操作工具
export const getToken = () => localStorage.getItem('vueToken')
export const setToken = (token) => localStorage.setItem('vueToken', token)
export const removeToken = () => {
  localStorage.removeItem('vueToken')
  // 直接触发登出逻辑，可根据项目调整路由调用方式
  window.location.href = '/login'
}

后续所有需要删除token的场景统一调用removeToken()，不要直接操作localStorage即可。

方案2：监听storage变化实现跨标签页同步登出 #

如果需要实现同个浏览器多标签页登录状态同步，可以监听原生storage事件：

// App.vue 根组件中添加监听逻辑
created() {
  // 监听其他标签页的localStorage改动
  window.addEventListener('storage', (e) => {
    // 判断是vueToken被删除时触发登出
    if (e.key === 'vueToken' && !e.newValue) {
      this.$router.push('/login')
    }
  })

  // 原有初始化登录校验逻辑优化
  const token = getToken()
  if (!token) {
    return this.$router.push('/login')
  }
  axios.get("checkLogin", {
    headers: { Authorization: `Bearer ${token}` }
  }).catch(() => {
    this.$router.push('/login')
  })
}

如果需要支持当前标签页直接修改localStorage也触发登出，可以在修改后主动派发自定义事件：

// 删除token时新增代码
localStorage.removeItem('vueToken')
window.dispatchEvent(new Event('localTokenChange'))

// App.vue中新增自定义事件监听
window.addEventListener('localTokenChange', () => {
  if (!getToken()) this.$router.push('/login')
})

方案3：axios响应拦截器兜底校验 #

在全局axios拦截器中统一捕获后端返回的401未授权错误，不管什么原因导致token失效都自动触发登出：

// 全局axios配置文件中添加
axios.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response?.status === 401) {
      removeToken()
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

内容的提问来源于stack exchange，提问作者Prudhvi Raj