当前位置：首页 > VUE

vue自动登录实现

2026-02-11 03:49:12VUE

实现自动登录的基本思路

自动登录通常结合前端（Vue）和后端（如Token验证）实现，核心流程包括：

用户首次登录时，后端返回有效Token并存储在前端（如localStorage）。
再次访问时，前端自动发送Token到后端验证，通过后跳过登录页。

前端Token存储与发送

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

// 在axios请求拦截器中自动附加Token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

路由守卫验证登录状态

在Vue Router中配置全局前置守卫，检查本地是否存在有效Token：

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

后端Token验证逻辑

后端需提供验证接口（如/api/validate-token），示例Node.js代码：

app.get('/api/validate-token', (req, res) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ valid: false });

  jwt.verify(token, 'SECRET_KEY', (err) => {
    res.json({ valid: !err });
  });
});

自动登录触发时机

在Vue根实例或主页面组件的created钩子中发起验证：

vue自动登录实现

created() {
  if (localStorage.getItem('auth_token')) {
    axios.get('/api/validate-token').then(response => {
      if (response.data.valid) {
        this.$router.push('/dashboard');
      }
    });
  }
}

安全增强措施

设置Token过期时间（如JWT的exp字段）
使用HttpOnly Cookies存储敏感信息（需配合SameSite属性）
定期刷新Token机制

完整示例代码结构

/src
  /utils
    auth.js      # 封装Token操作
    http.js      # axios配置
  /router
    index.js     # 路由守卫配置
  /views
    Login.vue    # 登录页处理Token存储
    Main.vue     # 主页触发自动验证