当前位置：首页 > VUE

vue自动登录实现

2026-01-15 00:47:27VUE

Vue 自动登录实现方法

使用 localStorage 或 sessionStorage 存储 token

在用户登录成功后，将 token 存储在 localStorage 或 sessionStorage 中。localStorage 数据持久化，sessionStorage 在浏览器关闭后清除。

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

在应用初始化时检查是否存在 token，存在则自动登录：

created() {
  const token = localStorage.getItem('token');
  if (token) {
    this.autoLogin(token);
  }
}

使用 Vuex 管理登录状态

在 Vuex 中维护登录状态和用户信息，便于全局访问：

// store.js
state: {
  token: localStorage.getItem('token') || '',
  isAuthenticated: !!localStorage.getItem('token')
},
mutations: {
  setToken(state, token) {
    state.token = token;
    state.isAuthenticated = true;
    localStorage.setItem('token', token);
  },
  clearToken(state) {
    state.token = '';
    state.isAuthenticated = false;
    localStorage.removeItem('token');
  }
}

路由守卫实现自动登录

在路由跳转前检查登录状态，未登录但有 token 则尝试自动登录：

// router.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.isAuthenticated && token) {
      store.dispatch('autoLogin', token).then(() => {
        next();
      }).catch(() => {
        next('/login');
      });
    } else if (!store.state.isAuthenticated) {
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

自动登录 API 请求

实现自动登录的 API 请求方法，验证 token 有效性：

// auth.js
autoLogin(token) {
  return axios.get('/api/auto-login', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
}

记住我功能扩展

添加记住我选项，延长 token 有效期：

login() {
  if (this.rememberMe) {
    localStorage.setItem('token', token);
  } else {
    sessionStorage.setItem('token', token);
  }
}

安全注意事项

使用 HTTPS 传输 token
设置合理的 token 过期时间
敏感操作需要重新验证密码
考虑使用 refresh token 机制

完整示例代码

// 登录组件
methods: {
  handleLogin() {
    api.login(this.credentials).then(response => {
      const token = response.data.token;
      this.$store.commit('setToken', token);
      if (this.rememberMe) {
        localStorage.setItem('token', token);
      }
      this.$router.push('/dashboard');
    });
  }
}

vue自动登录实现