登录失败的客户端通知

时间:2019-05-08 08:58:37

标签: javascript node.js express

我有一个node.js项目,可以在其中填写一个登录表单,该表单将作为url参数发送到我的server.js。如果可以验证发送的数据是否已注册,则客户端将登录。现在,我的问题是如何在不起作用时通知客户端? 我的login.html包含一个div,如果它是由我的login.js文件触发的,则会显示该div。但是如何激活触发器,我可以向客户端发送url参数并更改网站的行为吗?

server.js

app.get("/signUp/:username/:password", (req, res) => {
    auth.signUp({
        username: req.params.username,
        password: req.params.password
    }, (result) => {
        if (result) {
            res.redirect("../../index.html");
        } else {
            res.redirect("../../index.html");
            // res.send("Login failed");
        }
    })
})
app.get("/signIn/:username/:password", (req, res) => {
    auth.signIn({
        username: req.params.username,
        password: req.params.password
    }, (result) => {
        if (result) {
            res.redirect("../../index.html");
        } else {
            res.send("Login failed");
        }
    })
})

login.js 客户端

signIn = () => {
    let user = document.getElementById('signDiv-username').value;
    let pass = document.getElementById('signDiv-password').value;
    hideErrorLog();
    window.location.replace("/signIn/" + user + "/" + pass);
}
signUp = () => {
    let user = document.getElementById('signDiv-username').value;
    let pass = document.getElementById('signDiv-password').value;
    hideErrorLog();
    window.location.replace("/signUp/" + user + "/" + pass);
}

hideErrorLog = () => {
    let errorLog = document.getElementById("error-log");
    errorLog.style.display = "none";
    errorLog.innerText = "";
}
showErrorLog = (signUp) => {
    let errorLog = document.getElementById("error-log");
    errorLog.style.display = "block";
    if (signUp) {
        errorLog.innerText = "Benutzername existiert bereits!";
    } else {
        errorLog.innerText = "Benutzername/Passwort falsch!";
    }
}

1 个答案:

答案 0 :(得分:0)

我看到您一直在使用window.location.replace()来调用SignUp和SignIn API,而您只是将用户名和密码替换为url的一部分,而这并不是API调用AFAIK的方法。并且永远不要在URL中传递敏感数据,例如用户名和密码,将其作为请求正文的一部分发送。

您需要使用fetch()并在catch()内调用showErrorLog(),这意味着API调用中存在错误。

示例获取代码

fetch('http://example.com/movies.json')
  .then(function(response) {
    // Add some code here
  })
  .then(function(myJson) {
    // call showErrorLog() here
  });