Angular2-Meteor redirect after successful login for custom login form

help
1

I am attempting to create a simple login form. I can login and out just fine, but I want to redirect
the user after a successful login. After a lot of searching and trying different solutions I just can’t get any thing to work. Here is what I currently have.

    login(userInfo) {
      var email = userInfo.email;
      var password = userInfo.password;
        
        Meteor.loginWithPassword(email, password, function (error) {
            if(error){
                return false;
            }
            else{
                this.router.navigate(['UserList']);
            }
        });
    }

But it doesn’t navigate to UserList and when called I get.

Exception in delivering result of invoking 'login': .execute/Login</Login.prototype.login/<@http://localhost:3000/app/client/login/login.js?8ac85ce2a97f13d1e253558c94380b2bc268f0e0:64:29
Meteor.loginWithPassword/<.userCallback@http://localhost:3000/packages/accounts-password.js?8eae27e32c4d1bc1194f7c6dd2aaed1e33a88499:91:21
Ap.callLoginMethod/loginCallbacks<@http://localhost:3000/packages/accounts-base.js?7dabd814506e384c709f8bf707377955f9814129:612:5
_.once/<@http://localhost:3000/packages/underscore.js?46eaedbdeb6e71c82af1b16f51c7da4127d6f285:794:14
Ap.callLoginMethod/loggedInAndDataReadyCallback@http://localhost:3000/packages/accounts-base.js?7dabd814506e384c709f8bf707377955f9814129:720:5
Meteor.bindEnvironment/<@http://localhost:3000/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4:999:17
._maybeInvokeCallback@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:3500:7
.receiveResult@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:3520:5
._livedata_result@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:4631:7
Connection/onMessage@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:3365:7
._launchConnection/self.socket.onmessage/<@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:2734:11
_.forEach@http://localhost:3000/packages/underscore.js?46eaedbdeb6e71c82af1b16f51c7da4127d6f285:149:7
._launchConnection/self.socket.onmessage@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:2733:9
REventTarget.prototype.dispatchEvent@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:173:9
SockJS.prototype._dispatchMessage@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:1158:5
SockJS.prototype._didMessage@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:1216:13
SockJS.websocket/that.ws.onmessage@http://localhost:3000/packages/ddp-client.js?250b63e6c919c5383a0511ee4efbf42bb70a650f:1363:9

Any idea what I maybe missing or a better way to do what I want?

Thanks

2

Well actually I got it working with the change below. I don’t fully understand it and not sure why changing “function (error)” to "(error) => " for the callback worked, thinking it’s a Angular2 thing, because by looking at some Angular2 code I realized that was how all the callbacks were structured.

    login(userInfo) {
      var email = userInfo.email;
      var password = userInfo.password;
        
        Meteor.loginWithPassword(email, password,(error) => {
            if(error){
                return false;
            }
            else{
                this.router.navigate(['UserList']);
            }
        });
    }
3

The context for this in this.router in the first example is that of the callback of Meteor.loginWithPassword.

In the second example (using ES2015 =>), the context of this is that of the enclosing function, which in this case appears to be whatever is outside of login(userInfo).

So, had you done the classic self = this reference:

    login(userInfo) {
      var email = userInfo.email;
      var password = userInfo.password;
      var self = this;

        Meteor.loginWithPassword(email, password, function (error) {
            if(error){
                return false;
            }
            else{
                self.router.navigate(['UserList']);
            }
        });
    }

It would have worked.