代码之家 › 专栏 › 技术社区 › wmash

在加载pug时调用javascript函数-使用param设置localStorage

pug express javascript

wmash · 技术社区 · 8 年前

我试图做的是从一个pug模板调用一个JS函数,该模板将在 localStorage . 此项的值将是传递给pug模板的参数 “代币” .

过去也有人问过类似的问题,我从这些答案中得到了灵感,因为它们看起来很相似:

我的结果代码是:

用户.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);
        }
    });
});

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

恭喜。帕格

extends layout

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

block content
    ...

布局.pug 包括一个客户端JS脚本,该脚本还有一个函数 storeToken

不向控制台输出任何内容,也不在中设置任何内容 本地存储 . 我不确定这是否是最好的方式,甚至实现这一点,但似乎我的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>

我有4个pug页面,根据用户注册Cognito的阶段依次加载。我已经测试过将JS注入到其他3个模板中,所有这些代码都运行良好。例如:

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

我可以打电话给你 page 用户.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);
        }
    });
});
//////////

1 回复 | 直到 8 年前

wmash 8 年前

最后,由于某种原因,我以我的方式向模板传递了一个函数引用。如果我把它拿出来,JS就正常工作了。

<script> 模板中的标记。这是我的结果模板:

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 <脚本>