当前位置：首页 > VUE

vue实现强制登出

2026-03-09 17:42:54VUE

Vue 实现强制登出的方法

在 Vue 应用中实现强制登出功能通常涉及清除用户会话、重置应用状态并跳转到登录页面。以下是几种常见的实现方式：

清除用户 Token 和状态

通过 Vuex 或 Pinia 存储用户登录状态时，需清除相关数据并移除本地存储的 Token：

vue实现强制登出

// 示例：Vuex 中的登出 action
logout({ commit }) {
  commit('CLEAR_USER_DATA');
  localStorage.removeItem('authToken');
  router.push('/login');
}

拦截请求并处理 401 状态码

在 axios 拦截器中检测到 401 未授权状态时自动触发登出：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('logout');
    }
    return Promise.reject(error);
  }
);

使用路由守卫强制跳转

通过全局路由守卫检查用户认证状态：

vue实现强制登出

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuthenticated;
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

服务端推送强制登出

通过 WebSocket 或 SSE 接收服务端强制登出指令：

const eventSource = new EventSource('/api/auth-events');
eventSource.addEventListener('force-logout', () => {
  store.dispatch('logout');
});

完整示例代码

整合 Vuex 和路由守卫的完整实现：

// store.js
const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    SET_USER_DATA(state, { user, token }) {
      state.user = user;
      state.token = token;
      localStorage.setItem('authToken', token);
    },
    CLEAR_USER_DATA(state) {
      state.user = null;
      state.token = null;
      localStorage.removeItem('authToken');
    }
  },
  actions: {
    logout({ commit }) {
      commit('CLEAR_USER_DATA');
      router.push('/login');
    }
  }
});

// main.js
axios.interceptors.response.use(null, error => {
  if (error.response.status === 401) {
    store.dispatch('logout');
  }
  return Promise.reject(error);
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const isAuthenticated = store.state.token !== null;

  if (requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

实现时需注意清除所有认证相关的存储数据，包括 Vuex/Pinia 状态、localStorage/sessionStorage 以及 Cookie。对于敏感应用，建议同时通知后端使当前 Token 失效。

标签: vue