流星在登录后重新提交登录表

meteor rerender login form after log in

本文关键字：登录 提交 新提交 流星      更新时间：2023-09-26

我有一个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秒并消失。如何避免这种情况？

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

看跌期权：

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

在您的Meteor.loginWithPassword呼叫之后

即，对于iron路由器和"main"作为登录后渲染的模板

当您进行页面刷新时，服务器将在您创建新会话时再次登录，它将自动获取您以前登录的事实，并使用这些详细信息将您登录。但是，在这段时间内，它将没有userId，currentUser为null。然而，它将有一个loggingIn状态为true Meteor.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}}

这应该可以解决应用程序在第一页调用/刷新时向用户显示登录屏幕并引起混乱的问题，它还可以让他们知道它正在做什么，同时在后台工作以登录他们。

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

相关文章：