javascript - XMLHttpRequest() 不从我的 node.js/express 呈现视图?
问题描述
我正在从客户端向我的 node/express 应用程序中的路由发出 GET 请求,也许我遗漏了一些非常明显的东西,但我的应用程序停留在路径 localhost:5000 上并且没有转到 localhost:5000/adminPortal 并呈现视图根据 /adminPortal GET 路由中的 express res.render() 。我已经坚持了 3 天了,我确信这很明显......也许 XML http 请求不是正确的方法?我需要使用什么来将标头(授权)传递给快速路由以使其链接并呈现视图?这是客户端代码:
firebase.auth().onAuthStateChanged(function(user) {
console.log("Auth state changed");
//console.log("verified: " + user.emailVerified);
if(user){
firebase.auth().currentUser.getIdToken().then(function(token){
console.log('Sending request to with ID token in Authorization header.');
var req = new XMLHttpRequest();
req.open('GET', '/adminPortal', true);
req.setRequestHeader('Authorization', 'Bearer ' + token);
req.responseType = "document";
req.send();
}).catch(function(error){
console.log("error:" + error);
});
}
在我的服务器端进入这条路线(通过中间件后):
router.get('/',isLoggedInAsUser, (req, res) => {
let usersRef = db.collection('Users');
var ownPolls = [];
var allUsers = [];
let firebaseUsers = usersRef.get()
.then(snapshot => {
snapshot.forEach(user => {
console.log(user.id, '=>', user.data());
allUsers.push(user.data());
});
console.log("test");
res.render('adminPortal/index', {allUsers: allUsers});
return null;
})
.catch(err => {
console.log('Error getting documents', err);
});
});
这是检查我在 XMLHTTPrequest() 中传递的标头中的令牌的中间件:
//Check if request is from User account
isLoggedInAsUser: async function(req, res, next){
if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
console.log('Found "Authorization" header');
// Read the ID Token from the Authorization header.
idToken = req.headers.authorization.split('Bearer ')[1];
try {
const decodedToken = await admin.auth().verifyIdToken(idToken);
if(decodedToken){
req.body.uid = decodedToken.uid;
console.log("The decoded token: "+ decodedToken.uid);
next();
} else{
return res.status(401).send("You are not autheeeroized");
}
} catch (e){
return res.status(401).send("You are not authroized" + e);
}
}
解决方案
如果单击链接,则浏览器会发出 HTTP 请求并将结果作为新页面加载。
如果您提交表单,则浏览器会发出 HTTP 请求并将结果作为新页面加载。
如果您使用 an<img>
然后浏览器发出 HTTP 请求并将结果作为图像加载到当前文档中由<img>
元素标记的位置。
如果您使用XMLHttpRequest
,则浏览器发出 HTTP 请求并将结果返回给 JavaScript,并将其存储在 XHR 对象中:
const xhr = new XMLHttpRequest();
xhr.open('GET', '/adminPortal', true);
xhr.addEventListener("load", function () {
alert(this.responseText);
});
xhr.send();
XHR的全部意义在于它允许 JavaScript 通过 HTTP 与服务器通信,而无需加载新页面。
如果要导航到新页面,请使用链接或表单,或为location.href
.
如果你想使用 XHR,那么在加载处理程序中编写 JavaScript 来处理响应。