Question

我有一个Pug视图，它给用户一组链接。在您到达页面之前，用户已经过身份验证，我在会话变量中拥有用户名和部门。我可以将它们作为变量传递给视图，如下所示：

res.render('landingpage', { title: 'Landing Page', 
                            username:   req.session.username,
                            department: req.session.department  });

然后在视图中我有这一行并且它有效：

p(class='navbar-text') Welcome #{username} from #{department}

在顶部打印“欢迎Bob来自会计”，没有任何问题。

但我需要做的是根据传入的部门控制某些链接是否可见。（该部门是在身份验证功能中发现的，该功能将用户传递到登录页面并放入会话中。）

我试图将其放入文档就绪函数中，但这不起作用，因为它未定义。我需要做的是能够根据部门更改链接的可见性属性和onclick事件。我有一个JSON配置文件告诉我允许部门访问链接，但我无法弄清楚如何将该部门变量转换为我可以调用以改变可见性的javascript函数。

我尝试将它添加到文档就绪函数作为部门和＃{department}，但它最终要么不知道它是什么，要么像文字字符串一样使用它。有关如何进行的任何想法吗？

Answer 1

您可以使用隐藏的输入来传递部门信息并获取js中的输入值。

示例：

doctype html
html
    head
        title=title
        script(src='/node_modules/jquery/dist/jquery.min.js')
    body
        input#department(type='hidden',value=department)
        p(class='navbar-text') Welcome #{username} from #{department}
        img(id='accessApproved' src='/images/DarkBlueIcon.png' class='overlay' style='visibility: hidden;')
    script.
        $(document).ready( function() {
            var department = $('#department').val();
            if(department === 'Accounting') {
               document.getElementById('accessApproved').style.visibility = 'visible';
             }
        });

Answer 2

好的，所以我没有发布足够的信息让任何人看到我的要求。抱歉。在创建一个新帖子并将其全部切割到我需要的部分的过程中，我得到了它的工作。此代码有效：

在app.js文件中

'use strict';

var express = require('express');
var app = express();

app.set('views', './views');
app.set('view engine', 'pug');

var session = require('express-session');
var FileStore = require('session-file-store')(session);

var fileStoreOptions = {
                       path: './sessions',
                        ttl: 86400
                   };
var sessionOptions = {
                        secret: 'SecretKey',
                        resave: false,
                        saveUninitialized: false,
                        name: 'sessionId',
                        store: new FileStore(fileStoreOptions)
                    };
app.use(session(sessionOptions));

app.get('/landingpage', function(req,res,next) {
   req.session.accessToken = true;
   req.session.username = 'Bob';
   req.session.department = 'Accounting';
   res.render('landingpage', { title: 'Landing Page', 
                               username: req.session.username,
                               department: req.session.department  });
});

app.get('/images/DarkBlueIcon.png', function(req,res) {
          res.sendFile(__dirname + '/images/DarkBlueIcon.png');
});


app.get('/node_modules/jquery/dist/jquery.min.js', function(req,res) {
        res.sendFile(__dirname + '/node_modules/jquery/dist/jquery.min.js');
});

var server = app.listen(3000, function () { });

这是在pug文件中：

doctype html
html
    head
        title=title
        script(src='/node_modules/jquery/dist/jquery.min.js')
    body
        p(class='navbar-text') Welcome #{username} from #{department}
        img(id='accessApproved' src='/images/DarkBlueIcon.png' class='overlay' style='visibility: hidden;')
    script.
        $(document).ready( function() {
            if('#{department}' === 'Accounting') {
               document.getElementById('accessApproved').style.visibility = 'visible';
             }
        });

给你这个： screenshot of Hello to Bob and Blue Icon

Answer 3

从其他解决方案中澄清：内插字符串必须嵌套在引号内。如果您不使用＃{}周围的引号，则javascript会尝试将其作为变量读取。

解决方案：

'#{department}' === 'Accounting'

说明：

解决方案评估为'Accounting' === 'Accounting'，即true。错误的方法是忘记引号，并尝试#{department} === 'Accounting'，其评估为Accounting === 'Accounting'，与Undefined === 'Accounting'相同，即false。

使变量通过Pug可用于Javascript

3 个答案: