当前位置：首页 > VUE

vue实现长期登录

2026-02-17 09:18:37VUE

实现长期登录（记住我）功能

使用Vue实现长期登录功能通常需要结合前端和后端技术，以下是一种常见的实现方式：

前端实现方案

登录接口设计 前端发送登录请求时需要附带一个"记住我"的选项：

axios.post('/api/login', {
  username: 'user',
  password: 'pass',
  rememberMe: true // 用户勾选记住我时设为true
})

Token存储策略 根据用户是否选择记住我决定token存储方式：

if (rememberMe) {
  // 长期存储（localStorage）
  localStorage.setItem('auth_token', response.data.token);
} else {
  // 会话存储（sessionStorage）
  sessionStorage.setItem('auth_token', response.data.token);
}

自动登录检查 在应用初始化时检查是否有存储的token：

vue实现长期登录

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

后端实现方案

Token有效期设置 根据客户端请求生成不同有效期的token：

// 普通登录
const token = jwt.sign(payload, secret, { expiresIn: '2h' });

// 记住我登录
const token = jwt.sign(payload, secret, { expiresIn: '30d' });

刷新Token机制 实现token刷新接口防止长期token过期：

router.post('/refresh-token', (req, res) => {
  const refreshToken = req.body.refreshToken;
  // 验证refreshToken并返回新token
});

安全注意事项

HttpOnly Cookie 考虑使用HttpOnly Cookie存储token更安全：

vue实现长期登录

res.cookie('token', token, { 
  httpOnly: true,
  maxAge: rememberMe ? 30 * 24 * 60 * 60 * 1000 : null 
});

CSRF防护 如果使用Cookie需要实现CSRF防护：

// 生成CSRF Token
const csrfToken = generateToken();
res.cookie('XSRF-TOKEN', csrfToken);

定期强制验证 即使长期登录也应定期要求用户重新验证敏感操作

完整示例代码

Vue组件中实现记住我功能：

export default {
  data() {
    return {
      rememberMe: false,
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      this.$axios.post('/login', {
        ...this.loginForm,
        remember: this.rememberMe
      }).then(res => {
        if (this.rememberMe) {
          localStorage.setItem('token', res.data.token);
        } else {
          sessionStorage.setItem('token', res.data.token);
        }
        this.$router.push('/dashboard');
      })
    }
  }
}