0

我有一个用于构建登录系统的 Node.js 应用程序。我的登录系统正常工作，但我必须手动刷新页面才能显示“用户名登录”。它成功隐藏了您需要填写才能登录的登录/注册字段。

这是我的 app.js 代码：

/**
  * Application Configuration
  */
app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.enable('jsonp callback');
  app.set('view engine', 'jade');
  app.set('view options', {layout : false});
  app.use(express.bodyParser());
  app.use(express.cookieParser());
  app.use(express.session({
    secret : 'sessionsecret'      
  }));
  app.use(express.methodOverride());
  app.use(express.static(__dirname + '/public'));
  app.use(function(req, res, next){
    res.locals.session = req.session;
    next();
  });
  app.use(app.router);
});

这是login.js我隐藏登录表单的部分。

    if(username && password){
      $.post('/login', $(this).serialize(), function(response){
        if(response.retStatus === 'success'){
          $('#loginForm').hide();
          $('#signup-btn').hide();
          //$(location).attr('href', '/admin');
        }else if(response.retStatus === 'failure'){
          $('#signup-error-modal').modal('show');
        }
      });
    }
  });

最后这是应该自动显示用户名的视图的 JADE/HTML 代码

if(session.user)
        div#logoutsection.pull-right
          a#logout-btn.btn.btn-info.pull-right.top-bar-form-button(href='/logout') Logout
          p#loginprompt.pull-right.login-prompt #{session.user.username} 
            small logged In
      else
        a#signup-btn.btn.pull-right.top-bar-form-button(href='#signup-modal', data-toggle="modal") Sign Up
        form.pull-right.form-horizontal.top-bar-form(method="post", id="loginForm")
          input.input-small.top-bar-form-textbox(id="username", type="text", name="User", placeholder="Username")
          input.input-small.top-bar-form-textbox(id="password", type="password", name="Password", placeholder="Password")
          button.btn.btn-primary.top-bar-form-button(type="submit", value="Sign In") Sign In

如果您想查看更多代码，请告诉我，我想我这里都有。但我真的不明白为什么我必须手动刷新它才能显示用户名。欢迎任何想法？

4

1 回答 1

1

问题是，尽管如果会话在jade/html 文件上有用户，则显示用户名。它不会随 Ajax 响应自动更新。相反，您需要做的是更新 ajax 成功函数中的 html。

这是在您的 login.js 文件中，类似于以下内容：

if(username && password){
      $.post('/login', $(this).serialize(), function(response){
        if(response.retStatus === 'success'){
          $('#loginForm').hide();
          $('#signup-btn').hide();
          // Add the name of the user to the html here!
          // Edit: If you don't want to send the username from node.js
          $("p#loginprompt").html(username);
        }else if(response.retStatus === 'failure'){
          $('#signup-error-modal').modal('show');
        }
      });
    }

请注意，段落元素在附加到它之前应该存在于 DOM 上。并且用户名应该由服务器在响应中发送并进行清理以避免跨站点脚本攻击。

其他非用户友好的方法是以编程方式刷新页面。但请不要这样做。

于 2012-12-15T03:54:50.250 回答