# How to pass parameters from Login page!

**URL:** <https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908>\
**Category:** ionic-v3\
**Created:** [December 1, 2016, 6:30am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908 "2016-12-01T06:30:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 6:30am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/1 "2016-12-01T06:30:27Z")

</div>

I have a login page but i do not know how to pass certain parameters after subscribing and receiving data. Also I don’t know how and where to check the received data…if login is true , push (this) if not (log error) ???

login.ts

```
        @Component({
          selector: 'page-login',
          templateUrl: 'login.html'
         })
            export class LoginPage {

            login: {username?: string , password?: string} = {};
            submitted = false;

            constructor(public navCtrl: NavController, private schoolAppUsers: SchoolAppUsers) {

            this.schoolAppUsers=schoolAppUsers;
 
         } 

                onLogin(form) {

                   this.submitted = true;
  
                   if (form.valid) {
    
                   this.schoolAppUsers.login(this.login).subscribe(loginDetails => {
  
                   this.navCtrl.setRoot(TeachersPage);
                   });   
                 }
              }
           }

```

service.ts

```
       @Injectable()
       export class SchoolAppUsers {
       loginApiUrl = 'http://localhost/SchoolApp/include/userLogin.php';
       
        login(login): Observable<User> {
           let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
           let options = new RequestOptions({ headers: headers });

           return this.http.post(this.loginApiUrl,'username='+login.username+'&password='+login.password, options)
  .map(res => <User>(res.json()))

        }
       }

```

When I console log (loginDetails) , I see that I am receiving the right details, but how and where Do I write the conditions to act accordingly before setting or pushing the next page ??

Also when the user login , there is column specified for user role / user type … How do I pass this information along to use it in other pages…because I have 3 different users that have different access (admin , student, lecturer)

can someone please enlighten me on this issue , much appreciated.

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 7:17am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/2 "2016-12-01T07:17:52Z")

</div>

I think you can convert observable to promise and use then/catch for your purpose:

**Service:**

```auto
login(login): Promise<User> {
           let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
           let options = new RequestOptions({ headers: headers });

           return this.http.post(this.loginApiUrl,'username='+login.username+'&password='+login.password, options)
               .toPromise()
               .then(res => res.json())
        }

```

**Component:**

```auto
onLogin(form) {
    this.submitted = true;
    if (form.valid) {
        this.schoolAppUsers.login(this.login)
           .then(loginDetails => this.navCtrl.setRoot(TeachersPage)) // if you don't need to check or some action with loginDetails - just return navCtrl
           .catch(error => console.log('Auth error: ', error));
    }
}

```

You can pass params from login page to next in navCtrl params

```auto
.then(loginDetails => this.navCtrl.setRoot(TeachersPage, {loginParams: loginDetails}))

```

and catch params on **TeachersPage** with [NavParams](https://ionicframework.com/docs/v2/api/navigation/NavParams/) instance

```auto
import { OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';

export class TeachersPage implements OnInit {
    public loginParams: User;

    constructor(
        private params: NavParams
    ) { }

    public ngOnInit(): void {
        this.loginParams = this.params.get('loginParams');
    }

    public dismiss(): void {
        this.viewCtrl.dismiss();
    }
}

```

But if more than one page required loginParams, you can use service for it:

```auto
'use strict';

import { Injectable } from '@angular/core';

@Injectable()
export class GlobalsService {
    private $rootScope: any;

    constructor() {
        this.$rootScope = {};
    }

    public get(name: string): any {
        return this.$rootScope[name];
    }

    public set(name: string, value: any): void {
        this.$rootScope[name] = JSON.parse(JSON.stringify(value)); // for array and objects copy
    }

    public setCircular(name: string, value: any): void {
        this.$rootScope[name] = value; // JSON hack will not work here
    }

    public assign(name: string, value: any): void {
        var data = this.get(name) || {};
        data = Object.assign(data, value);
        this.set(name, data);
    }

    public clear(name?: string): void {
        if (name) {
            delete this.$rootScope[name];
        } else {
            this.$rootScope = {};
        }
    }
}

```

And in component:

```auto
onLogin(form) {
    this.submitted = true;
    if (form.valid) {
        this.schoolAppUsers.login(this.login)
           .then(loginDetails => this.globals.set('loginDetails', loginDetails)
           .then(()=> this.navCtrl.setRoot(TeachersPage))
           .catch(error => console.log('Auth error: ', error));
    }
}

```

And on other pages

```auto
import { OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';

export class TeachersPage implements OnInit {
    public loginParams: User;

    constructor(
        private globals: GlobalsService
    ) { }

    public ngOnInit(): void {
        this.loginParams = this.globals.get('loginParams');
    }

    public dismiss(): void {
        this.viewCtrl.dismiss();
    }
}

```

P.S: Code can contain errors, I write it without IDE

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 7:30am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/3 "2016-12-01T07:30:16Z")

</div>

Thank you snikh for your reply  
my side-server already returning appropriate responses: if username and password are true , it will return user data , if not , it will return an error message…

I think i need to check (loginDetails) because it has the response  
.then(loginDetails =\> this.navCtrl.setRoot(TeachersPage))

so how do i do that ?  
I tried accessing loginDetails like this ==\> loginDetails.role … but it didnt work out

my returned json data is like this: when I console.log(loginDetails);

error: "false"  
name: "abs"  
username: "abs12"  
password: "123"  
role: “1” \>\>\> for admin

error: "true"  
message: “wrong username or password”

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 7:43am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/4 "2016-12-01T07:43:47Z")

</div>

I think that this is bad practice. Server side must return correct response status (200, 401, 403 etc). And angular automatically split your response on good (then) and bad (catch).

But if you can’t change server side:

(NOTE: I rewrite my post above and show how to save params for different page)

```auto
onLogin(form) {
    this.submitted = true;
    if (form.valid) {
        this.schoolAppUsers.login(this.login)
           .then(loginDetails => {
                this.globals.set('loginDetails', loginDetails); // save details for other pages
                if (loginDetails.role === '1') {
                    return this.navCtrl.setRoot(AdminPage);
                } else {
                   return this.navCtrl.setRoot(TeachersPage);
                }
        });
    }
}

```

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 7:47am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/5 "2016-12-01T07:47:35Z")

</div>

I see , i will try to change my server side , even though im weak in php, weak in all actually

Thank you for you help , much appreciated 🙂

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 9:25am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/6 "2016-12-01T09:25:51Z")

</div>

mr. snikh

I keep receiving typescript error on : if (loginDetails.role === ‘1’)  
Operator ‘===’ cannot be applied to types ‘number’ and ‘string’  
??

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 9:29am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/7 "2016-12-01T09:29:52Z")

</div>

Your loginDetails.role type set to number. But according to your console log, it’s string. So change it (User interface, field role).  
Or you can change condition to

```auto
if (+loginDetails.role === 1)

```

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 9:34am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/8 "2016-12-01T09:34:59Z")

</div>

hmm unfortunately , the problem still persists…

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 9:38am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/9 "2016-12-01T09:38:22Z")

</div>

Not recommended, but you can try dirty hack

```auto
if ((<any>loginDetails).role === 1)

```

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 9:39am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/10 "2016-12-01T09:39:54Z")

</div>

also , when i console.log(loginDetails.role)  
I get ‘undefined’

this.schoolAppUsers.login(this.login)  
.then(loginDetails =\> {  
console.log(loginDetails.role);  
});  
}

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 9:46am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/11 "2016-12-01T09:46:03Z")

</div>

Probably problem in your schoolAppUsers service.  
Check console.log(res) and console.log(res.json()) in it.

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 9:58am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/12 "2016-12-01T09:58:02Z")

</div>

the dirty hack maybe working… however after clicking Login button , it does not redirect to the page return this.navCtrl.setRoot(TeachersPage);  
I checked the “Network” i receive response from php and user data

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 10:12am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/13 "2016-12-01T10:12:46Z")

</div>

the problem is , I cannot access “role” by loginDetails.role  
even though console.log(loginDetails) does return json data  
"error": “false”  
“name”: “abs”  
“username”: "abs12"  
“password”: "123"  
“role”: 1

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 10:20am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/14 "2016-12-01T10:20:21Z")

</div>

```
     this.schoolAppUsers.login(this.login)
           .then(loginDetails => {
           console.log(loginDetails); // returns json data
           console.log(loginDetails.role); // undefined

      if ((<any>loginDetails).role === 1) {
        return this.navCtrl.setRoot(TeachersPage);
      }
  });
```

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 10:32am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/15 "2016-12-01T10:32:50Z")

</div>

It’s some kind of magic 🙂

Maybe loginDetails return JSON stringified data? Check

```auto
console.log(typeof loginDetails);

```

if return string, then

```auto
loginDetails = JSON.parse(loginDetails);

```

If return object, than it definitely magic.

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 10:35am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/16 "2016-12-01T10:35:40Z")

</div>

it returns object

im about to cry lol

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [December 1, 2016, 10:48am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/17 "2016-12-01T10:48:51Z")

</div>

Hmm…maybe object keys contain non ASCII symbols? Try to copy **role** text field from console and replace on it in your

```auto
console.log(loginDetails.role);

```

Also add debugger after console.log and check in browser your object fields.

---

<div class="post-metadata">

**Author:** ![surajrao](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/surajrao/32/120071_2.png) [@surajrao](https://forum.ionicframework.com/u/surajrao)\
**Post date:** [December 1, 2016, 10:54am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/18 "2016-12-01T10:54:07Z")

</div>

you can check object fields by console.log(JSON.stringify(loginDetails))

---

<div class="post-metadata">

**Author:** ![yasirpanjsheri](https://avatars.discourse-cdn.com/v4/letter/y/c0e974/32.png) [@yasirpanjsheri](https://forum.ionicframework.com/u/yasirpanjsheri)\
**Post date:** [December 1, 2016, 10:58am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/19 "2016-12-01T10:58:03Z")

</div>

everything seems fine

[{“error”:“false”,“UserID”:1,“name”:“yasir”,“username”:“yasir12”,“password”:“123”,“role”:1}]

---

<div class="post-metadata">

**Author:** ![surajrao](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/surajrao/32/120071_2.png) [@surajrao](https://forum.ionicframework.com/u/surajrao)\
**Post date:** [December 1, 2016, 10:59am UTC](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908/20 "2016-12-01T10:59:38Z")

</div>

nope… your login details object is inside an array. you have to do loginDetails[0].role to fetch it

[Next page](https://forum.ionicframework.com/t/how-to-pass-parameters-from-login-page/71908.md?page=2)