前端如何做七天免登录

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！

前端实现七天免登录的一般步骤如下：

1. 用户首次登录时，在服务端生成一个带过期时间的token，并将该token存储在客户端的cookie或localStorage中。

2. 客户端每次请求都携带该token，并在服务端进行验证。如果token未过期，则认为用户已经登录，否则需要重新登录。

3. 如果用户勾选了“七天免登录”选项，则在服务器端将token的过期时间设置为7天后。这样，在客户端关闭浏览器、退出登录之后，再次访问网站时，仍然可以使用之前的token自动登录，而无需重新输入用户名和密码。

具体实现方法如下： 

1. 首先，在服务端生成一个带过期时间的token。可以使用jsonwebtoken等工具库生成jwt token，并将其返回给客户端。

javascript
const jwt = require('jsonwebtoken');

function generateToken(user) {
  const payload = { id: user.id, username: user.username };
  const secret = 'my-secret-key';
  const options = { expiresIn: '7d' };
  return jwt.sign(payload, secret, options);
}

2.将token存储在客户端的cookie或localStorage中。可以使用js-cookie等工具库处理cookie。

import Cookies from 'js-cookie';

function setToken(token) {
  Cookies.set('token', token, { expires: 7 });
}

function getToken() {
  return Cookies.get('token');
}

3.在每次请求时携带token并进行验证。可以使用axios等网络请求库，将token添加到请求头中。

import axios from 'axios';

axios.interceptors.request.use(config => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

4.在服务端进行token验证。可以使用jsonwebtoken等工具库解析jwt token，并验证其有效性和过期时间。

const jwt = require('jsonwebtoken');

function verifyToken(token) {
  try {
    const secret = 'my-secret-key';
    return jwt.verify(token, secret);
  } catch (error) {
    return null;
  }
}

app.post('/api/login', (req, res) => {
  // 验证用户身份，生成token
  const token = generateToken(user);

  // 将token返回给客户端保存
  res.cookie('token', token, { maxAge: 7 * 24 * 3600 * 1000 });

  // 返回登录成功信息
  res.json({ success: true, message: '登录成功' });
});

app.get('/api/profile', (req, res) => {
  // 获取客户端携带的token并进行验证
  const token = req.cookies.token || '';
  const payload = verifyToken(token);

  if (payload) {
    // 验证通过，返回用户信息
    res.json({ success: true, data: { id: payload.id, username: payload.username } });
  } else {
    // 验证失败，跳转到登录页面
    res.redirect('/login');
  }
});

总之，实现七天免登录的关键在于生成带过期时间的token，并将其保存在客户端。在每次请求时携带token，并在服务端进行验证即可。需要注意的是，由于token可能会被恶意用户窃取，因此建议使用HTTPS等加密传输协议来确保数据安全。