Question

我试图做的是从一个哈巴狗模板调用JS函数，该模板将在localStorage上设置一个项目。此项的值将是已传递到哈巴狗模板“令牌” 的参数。

过去曾问过类似的问题，我从这些答案中获得了灵感，因为它们似乎很相似：

我得到的代码是：

users.js

import setToken from "../src/setToken";

router.post("/signin", (req, res) => {
    ...

    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function(result) {
            res.render("congrats", {
                title: "Congrats",
                token: result.getAccessToken().getJwtToken(),
                setToken: setToken
            });
        },
        onFailure: function(err) {
            next(err);
        }
    });
});

setToken.js

export default (token) => {
    console.log("::: setToken :::");
    localStorage.setItem("cognitoToken", token);
};

congrats.pug

extends layout

block scripts
    script
        |   var setToken = #{setToken};
        |   setToken(#{token})

block content
    ...

layout.pug 包括一个客户端JS脚本，该脚本还具有功能storeToken。我也曾尝试称呼它，但什么也没有。

什么都没有输出到控制台，并且在localStorage中没有任何设置。我不确定这是否是实现这一目标的最佳方法，但看来我的JS甚至没有被执行。

在呈现模板或将其包含在客户端上时，是否也是传递此函数引用的最佳实践？

编辑

查看标记时，我可以看到我的JS在模板的<script>中正确呈现：

<script>
    console.log("token: ", **token value**);
    var setToken = function (token) {
        console.log(&quot;::: setToken :::&quot;);
        localStorage.setItem(&quot;cognitoToken&quot;, token);
    };
    setToken(**token value**)
</script>

编辑2

我有4个哈巴狗页面，我根据用户在注册Cognito所处的阶段依次加载。我已经测试过将JS注入其他3个模板中，并且所有这些代码都能正常工作。例如：

block scripts
    script(type="text/javascript")
        |   var page = "confirm";

然后我可以在控制台中调用page，该控制台会打印出“确认”。我在 congrats.pug 中尝试相同的变量声明，并返回未定义。因此，我想这与我渲染页面的方式有关。这是1个有效和1个无效的比较。在这里（ users.js 的扩展名）：

/*
 * Works
 */
router.post("/confirm", (req, res, next) => {
    const { confirm } = req.body;

    cognitoUser.confirmRegistration(confirm, true, function(err, result) {
        if (err) {
            next(err);
        }
        res.render("signin", {
            title: "Signin"
        });
    });
});
//////////

/*
 * Doesn't work
 */
router.post("/signin", (req, res) => {
    const { username, password } = req.body;
    const authenticationData = {
        Username: username,
        Password: password
    };
    const authenticationDetails = new AuthenticationDetails(authenticationData);

    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function(result) {
            res.render("congrats", {
                title: "Congrats",
                token: result.getAccessToken().getJwtToken(),
                setToken: setToken
            });
        },
        onFailure: function(err) {
            next(err);
        }
    });
});
//////////

Answer 1

最后，由于某种原因，事实是我像过去那样将函数引用传递给模板。如果我将其删除，则JS可以正常工作。

设置令牌后，我认为这是过多的开销，并且增加了复杂性，无法在外部文件中调用函数，因此直接在模板的<script>标记内进行操作即可。这是我生成的 working 模板：

extends layout

block scripts
    script(type="text/javascript").
        var token = "#{token}";
        localStorage.setItem("cognitoToken", token);

block content
    .container
        .col-md-6.mx-auto.text-center
            .header-title
            h1.wv-heading--title= title
        .row
            .col-md-4.mx-auto
                p You have successfully authenticated with AWS Cognito, your access token is
                    strong #{token}

贷记this answer，这向我展示了如何在<script>标签内引用哈巴狗参数

在载入哈巴狗上调用javascript函数-使用param设置localStorage

1 个答案: