...
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 完成了。
因此，如果我單擊該元素，應該會到達 url“http://localhost:3000/privatearea”，并且應該渲染頁面“private-area”。
但它不會發生。我不需要回應，但我會通過設定一些標題來訪問 url。
uj5u.com熱心網友回復：
fetch()本身不會在瀏覽器中呈現任何內容。它只是將內容回傳到您的 Javascript。因此，如果您.then()在fetch()呼叫中有處理程式，您只需從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().由于您沒有在此處顯示此功能的更大背景，因此尚不完全清楚此處最好的架構/解決方案是什么。以下是一些選項：
- 您可以
data從.then()我上面顯示的處理程式中獲取并使用您自己的 Javascript 將其插入當前頁面。 - 您可以做
window.location = '/privatearea';并找到一些其他方式將 Bearer 令牌傳送到您的服務器（可能之前對您的服務器的呼叫設定了會話 cookie），以便您的服務器可以使用會話 cookie 來驗證是否允許瀏覽器進入/privatearea。 - 您可以將您的身份驗證模型切換到對瀏覽器 URL 更友好的東西（如會話/cookie），因為您不能使用輸入到瀏覽器欄中的 URL 中的承載令牌，因為它們只能從 Javascript 中使用。用戶登錄，在您的服務器上分配了一個會話 cookie 和 URL 處理程式，用于來自瀏覽器的 URL 檢查。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/406438.html
標籤：