Question

我有一个像这样的Meteor和登录表单：

<template name="index">
    <h3>Index Page</h3>
    {{#if currentUser}}
        You are logged in!<br>
        <a href="/dashboard">Dashboard</a>
    {{else}} 
        {{> loginForm}}
    {{/if}}
</template>

<template name="loginForm">
    <div class="container">
        <div class="row col-md-offset-2 col-sm-offset-2">
            <div class="container col-md-2 col-sm-2">
                <h4>Login</h4>
            </div>
            <div class="container col-md-4 sol-sm-4">
                <h4><a href="#"><small>or register</small></a></h4>
            </div>
        </div>
        <!--div class="row"-->
        <form class="form-horizontal" id="formLogin">
            <div class="form-group">
                <div class="col-md-2 col-sm-2">
                    <label for="inputEmail" class="control-label pull-right">Email</label>
                </div>
                <div class="col-md-4 col-sm-4">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-2 col-sm-2">
                    <label for="inputPassword" class="control-label pull-right">Password</label>
                </div>
                <div class="col-md-4 col-sm-4">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <!--<div class="form-group">
          <div class="col-md-offset-2 col-md-10">
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div>
          </div>
        </div>-->
            <div class="form-group">
                <div class="col-md-offset-2 col-sm-offset-2 col-md-10 col-sm-6">
                    <input type="submit" class="btn btn-default" value="Sign in">
                </div>
            </div>
        </form>
        <!--/div-->
    </div>
    <!-- END loginForm END -->
</template>

这里是模板的JavaScript代码：

Template.loginForm.events({
    "submit #formLogin": function(e, t) {
        e.preventDefault();
        //console.log("Form login submitted");
        var loginForm = $(e.currentTarget),
            email = loginForm.find("#inputEmail").val(),
            password = loginForm.find("#inputPassword").val();
        //console.log("Email:" + email + "\n" + "Password:" + password);

        //++++++ Validation
        var trimInput = function(val) {
            return val.replace(/^\s*|\s*$/g, "");
        };

        isEmailValid = trimInput(email).length > 5 ? true : false
        //console.log(isEmailValid);

        isPasswordValid = password.length > 0 ? true : false
        //console.log(isPasswordValid);
        //------

        if (isEmailValid && isPasswordValid) {
            Meteor.loginWithPassword(email, password, function(err) {
                if (err) {
                    if (err.message === "User not found [403]") {
                        console.log("User does not exist.");
                    } else if (err.message === "Incorrect password [403]") {
                        console.log("Incorrect password");
                    } else if (err.message === "Match failed [400]") {
                        console.log("Match failed");
                    } else {
                        console.log(err.message)
                    }
                } else {
                    return true;
                }
            });
        } else {
            console.log("Incorrect data");
        };

    }
});

成功登录后，用户不应该看到该表单。但是，如果我刷新页面登录表单出现1-1.5秒并消失。怎么避免这个？

Answer 1

我有同样的问题，这就是我解决它的方法。

放：

    if (Meteor.userId()) Router.go("main");
    return false;

在Meteor.loginWithPassword来电

之后

即，铁路由器和“main”作为登录后呈现的模板

Answer 2

当您进行页面刷新时，服务器将在您创建新会话时再次登录，它将自动获取您之前登录的事实并使用这些详细信息登录。但是对于那个时期，它将没有userId，currentUser为null。但是它的loggingIn状态为true Meteor.loggingIn()，您不会检查它。为避免混淆，请检查登录状态，然后显示加载屏幕或微调器以指示正在发生的事情。

您可以创建全局loggingIn把手助手：

if (Handlebars) {
    Handlebars.registerHelper('loggingIn', function () {
      return Meteor.loggingIn();
    });
}

然后使用它来显示加载/微调模板，同时服务器在页面刷新后处理登录请求：

{{#if currentUser}}
    You are logged in!<br>
    <a href="/dashboard">Dashboard</a>
{{else}} 
    {{#if loggingIn}}
        {{> loading}}    
    {{else}}
        {{> loginForm}}
    {{/if}}
{{/if}}

哪个应该解决应用程序在首页调用/刷新时向用户显示登录屏幕并引起混淆的问题，它还会让他们知道它正在做某事，而它正在后台工作以登录它们

如果您仍然看到登录表单，那么它应该非常小，并且在恢复到登录或加载模板之前会非常快速地闪烁。

登录后流星重新登录登录表单

2 个答案: