当前位置：首页 > VUE

vue如何实现自动登录

2026-02-23 15:21:20VUE

Vue 实现自动登录的方法

使用 localStorage 或 sessionStorage 存储 token

在用户登录成功后，将 token 或其他认证信息存储在 localStorage 或 sessionStorage 中。这样即使页面刷新，也能从存储中读取 token 并自动登录。

// 登录成功后存储 token
localStorage.setItem('authToken', token);

在应用初始化时（如 App.vue 的 created 钩子），检查是否有存储的 token。如果有，则自动登录。

created() {
  const token = localStorage.getItem('authToken');
  if (token) {
    // 调用自动登录接口验证 token 有效性
    this.autoLogin(token);
  }
}

使用 Vuex 持久化插件

安装 vuex-persistedstate 插件，将 Vuex 的状态持久化到 localStorage 或 sessionStorage 中。这样即使页面刷新，Vuex 中的登录状态也能恢复。

vue如何实现自动登录

npm install vuex-persistedstate

在 store/index.js 中配置插件：

import createPersistedState from 'vuex-persistedstate';

export default new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

使用路由守卫

在路由守卫中检查登录状态，如果未登录但有存储的 token，则尝试自动登录。

vue如何实现自动登录

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('authToken');
  if (to.meta.requiresAuth && !store.state.isLoggedIn) {
    if (token) {
      // 调用自动登录接口
      store.dispatch('autoLogin', token).then(() => {
        next();
      }).catch(() => {
        next('/login');
      });
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

后端配合验证 token

自动登录需要后端接口支持验证 token 的有效性。前端在初始化时发送 token 到后端验证，如果有效则返回用户信息完成自动登录。

async autoLogin(token) {
  try {
    const response = await axios.get('/api/auto-login', {
      headers: { Authorization: `Bearer ${token}` }
    });
    // 更新 Vuex 中的用户状态
    this.commit('loginSuccess', response.data.user);
  } catch (error) {
    // token 无效则清除存储
    localStorage.removeItem('authToken');
  }
}

设置 token 过期时间

为了安全性，token 应设置过期时间。前端可以在存储 token 的同时存储过期时间，定期检查并刷新 token。

// 存储 token 和过期时间
localStorage.setItem('authToken', token);
localStorage.setItem('tokenExpiry', Date.now() + 3600 * 1000);

// 检查 token 是否过期
function isTokenExpired() {
  return Date.now() > localStorage.getItem('tokenExpiry');
}

通过以上方法组合使用，可以实现 Vue 应用的自动登录功能，同时兼顾用户体验和安全性。