当前位置：首页 > VUE

vue项目实现持久登录

2026-02-24 16:17:06VUE

持久登录的实现方法

持久登录（保持用户登录状态）通常结合前端和后端技术实现，以下是在Vue项目中常见的方案：

使用Token认证机制

前端在用户登录成功后存储Token（如JWT），后续请求携带该Token进行身份验证。Token可存储在：

vue项目实现持久登录

localStorage：关闭浏览器后仍存在，需注意XSS攻击风险
sessionStorage：仅当前会话有效，关闭标签页后失效
Cookie：可设置过期时间，配合HttpOnly和Secure属性更安全

// 登录成功后存储Token
localStorage.setItem('auth_token', response.data.token)
axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`

自动刷新Token

为避免Token过期导致用户需要重新登录，实现Token自动刷新机制：

vue项目实现持久登录

在Token接近过期时（通过解码JWT获取exp时间）
使用refresh token获取新access token
更新存储的Token和请求头

// 拦截响应检查Token过期
axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    return refreshToken().then(res => {
      // 更新Token并重试原始请求
    })
  }
  return Promise.reject(error)
})

路由守卫检查登录状态

在Vue Router中配置全局前置守卫，保护需要认证的路由：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth() // 检查Token有效性
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

服务端持久化会话

后端配合实现持久会话：

使用数据库存储会话信息
设置较长的会话过期时间
实现"记住我"功能时生成长期有效的Token

安全注意事项

避免存储敏感信息在客户端
使用HTTPS传输Token
考虑CSRF防护措施
实现Token黑名单机制用于登出

完整示例代码

// auth.js - 认证相关工具函数
export function setToken(token) {
  localStorage.setItem('auth_token', token)
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
}

export function checkAuth() {
  const token = localStorage.getItem('auth_token')
  if (!token) return false

  // 检查Token是否过期
  const decoded = jwtDecode(token)
  return decoded.exp > Date.now() / 1000
}

通过以上方法组合，可实现Vue项目的持久登录功能，同时兼顾安全性和用户体验。