当前位置：首页 > VUE

用vue实现自动登录

2026-02-25 02:29:20VUE

实现自动登录的基本思路

自动登录通常通过结合前端（Vue）和后端（如Token验证）实现。核心逻辑是用户首次登录时，后端返回Token并存储在前端（如localStorage），下次打开应用时自动携带Token验证。

前端存储Token

登录成功后，将后端返回的Token存储到localStorage或sessionStorage：

用vue实现自动登录

// 登录成功后的回调
localStorage.setItem('authToken', response.data.token);

路由守卫验证Token

在Vue Router的全局前置守卫中检查Token，决定是否跳转登录页：

用vue实现自动登录

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('authToken');
  if (to.meta.requiresAuth && !token) {
    next('/login');
  } else {
    next();
  }
});

自动发送Token的Axios拦截器

通过Axios请求拦截器，自动在请求头中添加Token：

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

后端Token验证逻辑

后端需提供验证接口（如/auth/validate），前端在初始化时调用：

created() {
  if (localStorage.getItem('authToken')) {
    axios.get('/auth/validate').catch(() => {
      localStorage.removeItem('authToken');
    });
  }
}

安全注意事项

使用httpOnly的Cookie存储Token可增强安全性（需后端配合）。
敏感操作应要求重新输入密码。
Token应设置合理过期时间，通过Refresh Token机制续期。

完整示例代码

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

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('authToken');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

// Login.vue
methods: {
  login() {
    axios.post('/login', this.credentials).then(res => {
      localStorage.setItem('authToken', res.data.token);
      this.$router.push('/dashboard');
    });
  }
}

通过以上步骤可实现基础自动登录功能，实际项目中需根据具体需求调整安全策略和用户体验设计。