当前位置：首页 > VUE

vue实现重登陆

2026-02-21 20:49:24VUE

Vue 实现重新登录功能

重新登录功能通常用于会话过期或权限变更后，要求用户重新验证身份。以下是实现方案：

方案一：基于路由守卫的全局控制

在路由配置中设置全局前置守卫，检测登录状态失效时跳转登录页：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth() // 自定义认证检查方法
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

方案二：响应拦截器处理

vue实现重登陆

在axios拦截器中捕获401未授权状态，触发重新登录流程：

// utils/request.js
instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('user/clearToken')
      router.push('/login?redirect=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    return Promise.reject(error)
  }
)

方案三：集中式状态管理

通过Vuex管理登录状态，提供强制登出方法：

vue实现重登陆

// store/modules/user.js
actions: {
  forceLogout({ commit }) {
    commit('CLEAR_TOKEN')
    router.push({
      path: '/login',
      query: { redirect: router.currentRoute.fullPath }
    })
  }
}

方案四：Token自动刷新

对于JWT等token机制，可实现静默刷新：

// utils/auth.js
function refreshToken() {
  return axios.post('/auth/refresh').then(res => {
    setNewToken(res.data.token)
    return true
  }).catch(() => {
    clearToken()
    return false
  })
}

注意事项

登录跳转时应携带当前路由作为redirect参数，便于登录后返回原页面
清除所有敏感数据包括Vuex中的用户信息和本地存储的token
对于敏感操作应设置二次验证机制
考虑添加会话过期前的倒计时提醒功能

完整示例代码

// 强制重新登录方法示例
function forceReLogin() {
  localStorage.removeItem('token')
  sessionStorage.clear()
  this.$store.commit('RESET_STATE')
  this.$router.push({
    path: '/login',
    query: {
      reason: 'session_expired',
      redirect: this.$route.fullPath
    }
  })
}

标签: vue