vue实现强制登出
Vue 实现强制登出的方法
强制登出通常涉及清除用户会话、跳转至登录页以及处理全局状态。以下是几种常见实现方式：
清除本地存储的认证信息
使用 localStorage 或 Vuex 存储的 token 需手动清除：
localStorage.removeItem('authToken');
sessionStorage.removeItem('userData');若使用 Vuex，可在 logout action 中重置状态：
// store/modules/auth.js
actions: {
logout({ commit }) {
commit('CLEAR_TOKEN');
commit('RESET_USER');
}
}重定向至登录页面
通过路由守卫或编程式导航跳转：
// 在登出逻辑中调用
this.$router.push('/login');
// 或配置全局路由守卫
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('authToken');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});中断当前所有请求
若使用 axios，可通过取消令牌终止 pending 请求：
import axios from 'axios';
const source = axios.CancelToken.source();
// 在请求中传入 cancelToken
axios.get('/api/data', { cancelToken: source.token });
// 登出时取消请求
source.cancel('强制登出，请求终止');全局事件通知
通过事件总线或 Vuex 通知其他组件登出状态：
// 使用事件总线
import Vue from 'vue';
const EventBus = new Vue();
// 触发登出事件
EventBus.$emit('forceLogout');
// 组件监听
EventBus.$on('forceLogout', () => {
// 执行清理操作
});服务端主动失效会话
服务端需提供接口使 token 失效：
// 调用使 token 失效的 API
api.post('/api/auth/invalidate', { token: currentToken })
.then(() => {
// 客户端清理逻辑
});完整示例代码
// 强制登出函数
function forceLogout() {
// 1. 清除本地 token
localStorage.removeItem('authToken');
// 2. 取消 pending 请求
if (window.axiosCancelToken) {
window.axiosCancelToken.cancel();
}
// 3. 重置 Vuex 状态
store.dispatch('auth/logout');
// 4. 跳转至登录页
router.push('/login?reason=forced');
// 5. 可选：显示通知
showToast('会话已失效，请重新登录');
}注意事项
- 安全：确保服务端同步使 token 失效，避免客户端仅清除本地数据导致 token 仍有效。
- 用户体验：可添加重登逻辑（如自动跳转前倒计时提示）。
- 多标签页同步：通过
BroadcastChannel或localStorage事件同步登出状态。
