当前位置：首页 > VUE

vue实现重登陆

2026-01-21 05:18:38VUE

Vue 实现重新登录功能

在 Vue 应用中实现重新登录功能通常涉及以下几个关键步骤：

处理登录状态失效

使用 Vuex 或 Pinia 管理用户登录状态，当检测到 token 过期或无权限时触发重新登录流程。示例代码展示如何检查 token 有效性：

// 在请求拦截器中添加 token 检查
axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    store.dispatch('logout')
    router.push('/login')
  }
  return Promise.reject(error)
})

跳转登录页面设计

创建独立的登录页面组件，包含用户名密码输入表单和提交逻辑。路由配置应确保未授权用户只能访问登录页：

vue实现重登陆

const routes = [
  {
    path: '/login',
    component: Login,
    meta: { requiresAuth: false }
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

路由守卫实现

通过全局前置守卫检查路由元信息，拦截未登录用户的访问请求：

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuthenticated
  if (to.matched.some(record => record.meta.requiresAuth)) {
    isAuthenticated ? next() : next('/login?redirect=' + to.path)
  } else {
    next()
  }
})

登录后重定向处理

登录成功后读取 URL 中的 redirect 参数，实现用户返回原访问页面：

vue实现重登陆

// 登录方法示例
methods: {
  handleLogin() {
    auth.login(this.credentials).then(() => {
      const redirect = this.$route.query.redirect || '/'
      this.$router.push(redirect)
    })
  }
}

Token 自动刷新机制

对于长时间会话，可实现 token 自动刷新避免频繁重新登录。在响应拦截器中处理 401 错误时尝试刷新 token：

let isRefreshing = false
let failedQueue = []

axios.interceptors.response.use(null, async error => {
  if (error.config && error.response?.status === 401 && !error.config._retry) {
    if (isRefreshing) {
      return new Promise((resolve) => {
        failedQueue.push(() => resolve(axios(error.config)))
      })
    }

    error.config._retry = true
    isRefreshing = true

    try {
      const newToken = await refreshToken()
      store.commit('setToken', newToken)
      error.config.headers.Authorization = `Bearer ${newToken}`
      failedQueue.forEach(cb => cb())
      failedQueue = []
      return axios(error.config)
    } catch (e) {
      store.dispatch('logout')
      return Promise.reject(e)
    } finally {
      isRefreshing = false
    }
  }
  return Promise.reject(error)
})

用户体验优化

添加登录状态提示和加载动画提升用户体验：

<template>
  <div v-if="isLoggingIn" class="login-overlay">
    <div class="spinner"></div>
    <p>正在重新登录...</p>
  </div>
</template>

<script>
export default {
  computed: {
    isLoggingIn() {
      return this.$store.state.auth.isLoggingIn
    }
  }
}
</script>

以上方案可根据实际项目需求进行调整，关键是要确保认证状态管理、路由控制和错误处理的完整性。对于更复杂的场景，可以考虑集成 OAuth 2.0 或第三方认证服务。

标签: vue