前端如何做七天免登录

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

用户首次登录时，在服务端生成一个带过期时间的token，并将该token存储在客户端的cookie或localStorage中。
客户端每次请求都携带该token，并在服务端进行验证。如果token未过期，则认为用户已经登录，否则需要重新登录。
如果用户勾选了“七天免登录”选项，则在服务器端将token的过期时间设置为7天后。这样，在客户端关闭浏览器、退出登录之后，再次访问网站时，仍然可以使用之前的token自动登录，而无需重新输入用户名和密码。

具体实现方法如下：

首先，在服务端生成一个带过期时间的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等加密传输协议来确保数据安全。

前端如何做七天免登录

猜你喜欢