当前位置：首页 > VUE

vue自动登录如何实现

2026-01-12 02:22:18VUE

实现自动登录的基本思路

自动登录通常通过结合本地存储（如localStorage或cookie）和token验证机制实现。用户首次登录成功后，服务器返回的认证token会被保存在客户端，下次打开应用时自动发送该token进行验证。

使用localStorage存储token

用户登录成功后，将token存入localStorage，并在Vue应用的全局路由守卫中进行验证：

// 登录成功后保存token
localStorage.setItem('auth_token', response.data.token);

// 在main.js或路由配置中添加全局前置守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('auth_token');
  if (to.matched.some(record => record.meta.requiresAuth) && !token) {
    next('/login');
  } else {
    next();
  }
});

使用axios拦截器自动附加token

通过axios请求拦截器，每次请求自动携带存储的token：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

处理token过期

实现token过期时的自动刷新或重新登录：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('auth_token');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

使用cookie替代localStorage

如需更安全的存储方式，可使用httpOnly cookie：

// 后端设置httpOnly cookie
res.cookie('token', generateToken(), {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production'
});

// 前端无需处理token存储，cookie会自动随请求发送

记住我功能实现

在登录表单中添加记住我选项，延长token有效期：

vue自动登录如何实现

// 登录时根据用户选择设置不同过期时间
const expiresIn = rememberMe ? 30 * 24 * 60 * 60 : 2 * 60 * 60; // 30天或2小时
loginAPI(username, password).then(res => {
  localStorage.setItem('auth_token', res.token);
  localStorage.setItem('token_expiry', Date.now() + expiresIn * 1000);
});