CSRFToken无需服务端渲染

在前后端分离的架构中，由于前端是静态页面，在无法直接使用服务端渲染的情况下，如何在前端使用 CSRF Token 来增加应用的安全性是一个常见问题。

一种解决方法是通过在页面中引入 CSRF Token，并在提交请求时将 Token 一同发送到后端。具体实现可以通过在前端使用 Cookie 或者 LocalStorage 存储 Token，在请求时从中获取，然后将 Token 附加到请求头中。后端可以读取请求头中的 Token 并进行验证。

以下是一个使用 Axios 库实现该方法的示例：

前端代码：

// 在登录后保存 Token 至 Cookie 中
function saveToken(token) {
  document.cookie = `csrf_token=${token}; path=/`;
}

// 获取 Cookie 中保存的 Token
function getToken() {
  return document.cookie
    .split(';')
    .find(cookie => cookie.trim().startsWith('csrf_token='))
    ?.split('=')[1];
}

// 在请求时将 Token 附加到请求头
async function request(url, data) {
  const token = getToken();
  const headers = { 'X-CSRF-Token': token };

  const response = await axios.post(url, data, { headers });
  return response.data;
}

// 登录按钮点击事件
async function onLoginClick() {
  const response = await request('/login', { username, password });
  // ...
}

后端代码：

function validateCsrfToken(req, res, next) {
  const token = req.header('X-CSRF-Token');
  const savedToken = req.cookies.csrf_token;

  if (!token || token !== savedToken) {
    res.status(403).send('Invalid CSRF token');
  } else {
    next();
  }
}

app.post('/api/submit', validateCsrfToken, (req, res) => {
  // ...
});

在上述示例中，前端代码通过调用 saveToken 函数将 Token 保存至 Cookie 中，并在请求时通过调用 getToken 函数从