2016-04-21 14 views
0

Ich möchte ein einfaches Login, Register und Logout-Menü mit Meteor und Iron Router erstellen. Bevor ich das Iron Router Paket benutzt habe, konnte ich einen neuen Benutzer anmelden und mich einfach einloggen oder abmelden. Deshalb hatte ich diesen Code in meinem HTML-Dokument:Meteor - Benutzer kann nicht nach dem Hinzufügen von Routen mit Eisen.Router zum Login und registrieren Formular

<body> 
    {{#if currentUser}} 
    {{> dashboard}} 
    {{else}} 
    {{> register}}<br> 
    {{> login}} 
    {{/if}} 
</body> 

Jetzt möchte ich das Login und Formular registrieren. Wenn Sie die Login-Taste drücken, erhalten wir: lochalhost: 3000 Login (das funktioniert gut).

Aber Ich weiß nicht:

  • , warum ich nicht einen neuen Benutzer senden kann mehr
  • wie kann ich von dem erfolgreichen Anmeldung Weg zur Armaturenbrett Route
  • ändern
  • und wahrscheinlich wie kann ich mich abmelden (konnte es noch nicht testen)

Ich bin neu in JS und Meteor. Trotzdem habe ich im Internet keine Lösung gefunden oder eine Lösung gefunden.

Mein komplettes Dokument wie folgt aussieht:

  • main.html:

    <head> 
        <title>Routing</title> 
    </head> 
    
    <body> 
        {{#if currentUser}} 
        {{> dashboard}} 
        <!--{{else}} 
        {{> register}}<br> 
        {{> login}} --> 
        {{/if}} 
    </body> 
    
    <template name="main"> 
        <h1>Text</h1> 
        {{> navigation}} 
        {{> yield}} 
        <hr /> 
        <p> 
         Copyright &copy; 
        </p> 
    </template> 
    
    <template name="home"> 
        <p> 
        Welcome to the <b>Text</b> website. 
        </p> 
    </template> 
    
    <template name="navigation"> 
        <ul> 
        <li><a href="{{pathFor route='home'}}">Home</a></li> 
        <li><a href="{{pathFor route='register'}}">Register</a></li> 
        <li><a href="{{pathFor route='login'}}">Login</a></li> 
        </ul> 
    </template> 
    
    <template name="register"> 
        <form> 
        <input type="text" id="username"> 
        <input type="text" id="email"> 
        <input type="password" id="password"> 
        <input type="submit" value="Register"> 
        </form> 
    </template> 
    
    <template name="login"> 
        <form> 
        <input type="text" id="login-email"> 
        <input type="password" id="login-password"> 
        <input type="submit" value="Login"> 
        </form> 
    </template> 
    
    <template name="dashboard"> 
        <p> 
        Yor're logged in. 
        <a href="{{pathFor route='home'}}" class="logout">Logout</a> 
        </p> 
    </template> 
    
  • main.js

    Router.route('register'); // Default name is register 
        Router.route('login'); // Default name is login 
        Router.route('dashboard'); 
        Router.route('/', { 
        name: 'home', 
        template: 'home' 
        }); 
    
        Router.configure({ 
        layoutTemplate: 'main' 
        }); 
    
    
        if (Meteor.isClient) { 
        Template.register.events({ 
         'submit form': function(event, template) { 
         event.preventDefault(); 
         var usernameVar = template.find('#username').value; 
         var emailVar = template.find('#email').value; 
         var passwordVar = template.find('#password').value; 
         Accounts.createUser({ 
          username: usernameVar, 
          email: emailVar, 
          password: passwordVar 
         }) 
         } 
        }); 
    
    Template.login.events({ 
        'submit form': function(event, template) { 
        event.preventDefault(); 
        var emailVar = template.find('#login-email').value; 
        var passwordVar = template.find('#login-password').value; 
        Meteor.loginWithPassword(emailVar, passwordVar); 
        } 
    }); 
    Template.dashboard.events({ 
        'click .logout': function(event) { 
        event.preventDefault(); 
        Meteor.logout(); 
        prompt("You successfully logged out"); 
        } 
    }); 
    

    }

Und ich fügte hinzu:

  • die iron:router Paket
  • meteor add accounts-ui accounts-password

Antwort

0

würde ich sagen, nicht die offizielle Dokumentation für Iron Router und Meteor lesen besseres Verständnis zu haben. Ich nahm Ihren Code und führte einige Tests durch, es funktioniert gut. Ich habe nur Eisen hinzugefügt: router accounts-ui (Nachschlagen Dokumentation für diese, können Sie einfache Anmeldung und Anmeldung mit diesem Paket erstellen) und Konten-Passwort.

main.html

<head> 
    <title>Routing</title> 
</head> 

<body> 
    {{#if currentUser}} 
    {{> dashboard}} 
    <!--{{else}} 
    {{> register}}<br> 
    {{> login}} --> 
    {{/if}} 
</body> 

<template name="main"> 
    <h1>Text</h1> 
    {{> navigation}} 
    {{> yield}} 
    <hr /> 
    <p> 
     Copyright &copy; 
    </p> 
</template> 

<template name="home"> 
    <p> 
    Welcome to the <b>Text</b> website. 
    </p> 
</template> 

<template name="navigation"> 
    <ul> 
    <li><a href="{{pathFor route='home'}}">Home</a></li> 
    {{#unless currentUser}} 
    <li><a href="{{pathFor route='register'}}">Register</a></li> 
    <li><a href="{{pathFor route='login'}}">Login</a></li> 
    {{/unless}} 
    </ul> 
</template> 

<template name="register"> 
    {{#unless currentUser}} 
    <form> 
    <input type="text" id="username"> 
    <input type="text" id="email"> 
    <input type="password" id="password"> 
    <input type="submit" value="Register"> 
    </form> 
    {{/unless}} 
</template> 

<template name="login"> 
    {{#unless currentUser}} 
    <form> 
    <input type="text" id="login-email"> 
    <input type="password" id="login-password"> 
    <input type="submit" value="Login"> 
    </form> 
    {{/unless}} 
</template> 

<template name="dashboard"> 
    <p> 
    Yor're logged in. 
    <a href="{{pathFor route='home'}}" class="logout">Logout</a> 
    </p> 
</template> 

main.js

goHome =function(){ 
    if(Meteor.userId()){ 
    Router.go('/'); 
    } 
} 


Router.configure({ 
    layoutTemplate: 'main' 
}); 


Router.route('/register', { 
    template:'register', 
    onBeforeAction:function(){ 
    goHome(); 
    this.next(); 
    } 
}); // Default name is register 

Router.route('/login', { 
    template:'login', 
    onBeforeAction:function(){ 
    goHome(); 
    this.next(); 
    } 
}); 

Router.route('/dashboard',{ 
    template:'dashboard' 
}) 

Router.route('/', { 
    name: 'home', 
    template: 'home' 
}); 


if (Meteor.isClient) { 
    Template.register.events({ 
    'submit form': function(event, template) { 
     event.preventDefault(); 
     var usernameVar = template.find('#username').value; 
     var emailVar = template.find('#email').value; 
     var passwordVar = template.find('#password').value; 
     Accounts.createUser({ 
     username: usernameVar, 
     email: emailVar, 
     password: passwordVar 
     }, function(error){ 
     if(!error){ 
      Router.go('/'); 
     } 
     }) 
    } 
    }); 

Template.login.events({ 
'submit form': function(event, template) { 
    event.preventDefault(); 
    var emailVar = template.find('#login-email').value; 
    var passwordVar = template.find('#login-password').value; 
    Meteor.loginWithPassword(emailVar, passwordVar, function(error){ 
    if(!error){ 
     Router.go('/'); 
    } 
    }); 
} 
}); 
Template.dashboard.events({ 
'click .logout': function(event) { 
    event.preventDefault(); 
    Meteor.logout(); 
    prompt("You successfully logged out"); 
} 
}); 
} 
+0

Hallo, danke für die Antwort. Hast du "meteor add useraccounts: iron-routing" hinzugefügt oder was meinst du mit "iron: router accounts-ui"? Deine Version funktioniert nach dem Kopieren nicht ... Ich habe immer noch das gleiche Problem. – LenC

+0

ich habe gerade so hinzugefügt: Meteor hinzufügen Eisen: Router Meteor hinzufügen Konten-Passwort Ich habe nur Accounts-Ui, um weitere Informationen über die einfache Anmeldung und Login. Es funktioniert ohne Accounts - aber mit diesem Paket können Sie einfach durch Aufruf von {{> loginButtons}} eine Anmeldung und Anmeldung erstellen. –

+0

Okay danke :) Eine andere Möglichkeit ist Router.go ("Pfad") hinzuzufügen; – LenC

Verwandte Themen