当前位置：首页 > VUE

vue实现自动登录功能

2026-02-23 01:38:53VUE

Vue 实现自动登录功能

自动登录功能通常结合前端 Vue 和后端 API 实现，核心逻辑包括 Token 存储、自动验证和状态管理。以下是具体实现方法：

登录逻辑与 Token 存储

用户登录成功后，后端返回 Token（如 JWT）。前端需将 Token 存储到本地（localStorage 或 cookie）并记录过期时间：

// 登录成功后处理
localStorage.setItem('authToken', response.data.token);
localStorage.setItem('tokenExpiry', response.data.expiryTime);

自动登录验证

应用初始化时（如 App.vue 的 created 钩子），检查本地是否存在有效 Token：

created() {
  const token = localStorage.getItem('authToken');
  const expiry = localStorage.getItem('tokenExpiry');

  if (token && new Date(expiry) > new Date()) {
    // 发送 Token 到后端验证
    this.$store.dispatch('autoLogin', token);
  }
}

Vuex 状态管理

通过 Vuex 管理登录状态和用户信息，示例 Store 模块：

const actions = {
  async autoLogin({ commit }, token) {
    try {
      const response = await axios.get('/api/validate', {
        headers: { Authorization: `Bearer ${token}` }
      });
      commit('SET_USER', response.data.user);
    } catch (error) {
      localStorage.removeItem('authToken');
    }
  }
};

路由守卫控制访问

使用 Vue Router 的全局守卫拦截未认证的访问：

vue实现自动登录功能

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

安全增强建议

HttpOnly Cookie：优先使用后端设置的 HttpOnly Cookie 存储 Token，避免 XSS 攻击。
刷新 Token：实现 Token 刷新机制，通过短效 Access Token 和长效 Refresh Token 组合。
敏感操作验证：关键操作（如修改密码）需二次验证。

完整示例代码

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

通过以上步骤，可实现基于 Token 的自动登录功能，兼顾用户体验与安全性。