javascript - bootstrappedUser - Jade 或 EJS 到 HTML

Question

我一直在做一些关于平均堆栈的指南，但我现在陷入了困境。按照本指南，我创建了一个简单的身份验证，可以使用 Passport JS 登录。无论如何，每次页面刷新时，身份验证都会重新启动(客户端不再识别它)。

由于这应该在指南中发生，并且我们即将修复它，因此指南说了以下内容。1. 创建一个 Jade 文件并插入以下内容:

    if !!bootstrappedUser
  script.
    window.bootstrappedUserObject = !{JSON.stringify(bootstrappedUser)}

我已经在我的 html 文件中尝试过这个，但它不起作用:

  <script type='text/javascript'>

          if (bootstrappedUser != "undefined" ){
          window.bootstrappedUserObject = JSON.stringify(bootstrappedUser);
           }

    </script>

收到错误:Uncaught ReferenceError:bootstrappedUser 未定义即使我已经在后端 js 文件中创建了变量并将 req.user 分配给了它。

我想将此文件包含在我的主布局(index.html)中。问题是我没有使用 Jade 作为模板引擎，而是使用纯 HTML，而且我不知道如何将这段代码转换为在我的 index.html 中作为简单的 HTML 工作。

看来这里的这条语句仅在用户点击登录按钮时才初始化。有谁知道如何用纯 HTML 编写上述代码吗？

我浏览了StackOverflow，发现了几乎相似的问题，但还不够相似。提前致谢，亚历山大

Answer 1

bootstrappedUser 是服务器端代码传递给 Jade 编译器的变量，Jade 编译器在编译时将其注入(inject) HTML。如果您打算自己编写 HTML，则无法从服务器端代码注入(inject)变量，这显然是因为 HTML 只是静态标记。您可能必须自己通过 ajax 或其他方式在客户端从服务器获取该变量。

Via Angular controller let's say ?

您可以首先在服务器上定义一个为您想要的变量提供服务的路由

app.get('/bootstrappedUser', function(req, res){
    if(req.user)
        res.json(req.user);
    else
        res.status(401).end();
});

然后在客户端 Angular 上，您可以执行 http 请求并获取该变量

$http.get('/bootstrappedUser')
    .success(function(data, status, headers, config) {
        $scope.bootstrappedUser = data;
    });