如何用Handlebars和JavaScript实现登录页跳转至用户个人资料页？

核心问题 #

前端登录请求的API路径错误，导致后端的登录接口未被正确触发，进而无法执行登录后的跳转逻辑。

具体错误点 #

前端login.js中，fetch请求的地址写的是/api/users/，但后端userRoutes里的登录接口路由是/login，正确的请求路径应该是/api/users/login。

修改后的前端代码 #

const login = async (event) => {
    event.preventDefault();
  
    const email = document.querySelector('#input-email').value;
    const password = document.querySelector('#input-password').value;
  
    if (email && password) {
      // 修正API请求路径
      const response = await fetch('/api/users/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' },
      });  
      if (response.ok) {
        window.location.replace('/profile');
      } else {
        alert('Failed to log in');
      }
    }
  };
  
  document
    .querySelector('.login-form')
    .addEventListener('submit', login);

额外检查项 #

• 确认后端session配置正常，req.session.save()执行后能正确存储用户登录状态
• 个人资料页/profile需包含登录校验逻辑，确保仅已登录用户可访问

内容的提问来源于stack exchange，提问作者Anna Riley