为什么 fetch 没有到达指定的 url？

Question

...
const userIcon = document.querySelector('.user-icon');

userIcon.addEventListener("click", () => {
            if (token) {
                fetch('/privatearea', {
                    headers: {
                        'authorization': `Bearer ${token}`
                    }
                }).catch(err => console.log(err));
            } else {
                window.location.assign('/login');
            }
...

我想做的是：

• 如果存在“token”，则单击元素“userIcon”时，我想获取 url“http://localhost:3000/privatearea”。
• 如果令牌不存在，则到达 URL“http://localhost:3000/login”。

...
router.get('/privatearea', authenticateToken, (req, res) => {
    res.render("private-area");
});
...

后端已经用node js和express做了。

所以，如果我单击该元素，应该会到达“http://localhost:3000/privatearea”的 url，并且应该渲染页面“private-area”。

但这不会发生。我不需要回复，但我会通过设置一些标题来访问 url。

Answer 1

fetch() 本身不会在浏览器中呈现任何内容。它只是将内容返回到您的 Javascript。因此，如果您在fetch() 调用上有一个.then() 处理程序，您只需从服务器上的res.render("private-area"); 取回渲染数据。

userIcon.addEventListener("click", () => {
    if (token) {
        fetch('/privatearea', {
            headers: {
                'authorization': `Bearer ${token}`
            }
        }).then(data => {
            // here you will see the result of res.render("private-area"); 
            //   on your server
            console.log(data);
        }).catch(err => console.log(err));
    } else {
        window.location.assign('/login');
    }
    ...
}

因此，您拥有它的方式不是使用fetch() 的正确设计。由于您没有在此处显示此功能的更大背景，因此尚不完全清楚此处的最佳架构/解决方案是什么。以下是一些选项：

1. 您可以从上面显示的.then() 处理程序中获取data，然后使用您自己的Javascript 将其插入当前页面。
2. 您可以使用window.location = '/privatearea'; 并找到其他方式将 Bearer 令牌传送到您的服务器（可能之前对服务器的调用设置了会话 cookie），以便您的服务器可以使用会话 cookie 来验证浏览器是否被允许输入/privatearea。
3. 您可以将您的身份验证模型切换为对浏览器 URL 更友好的东西（如会话/cookie），因为您不能使用输入到浏览器栏中的 URL 中的承载令牌，因为它们只能在 Javascript 中使用.用户登录后，会在您的服务器上为来自浏览器的 URL 分配一个会话 cookie 和 URL 处理程序检查。