Show login data on another page

Ionic Framework ionic-v3
1

Hello,

In my login page i have this code

 connexion(){
  var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
   
  var params = 'email='+this.userData.email+'&passe='+this.userData.passe;
  this.http.post(apiUrl, params , {headers: headers})
  .subscribe(
    data => {
      this.responseData = data,
      //console.log(this.responseData),
      localStorage.setItem('userData', JSON.stringify(this.responseData));
      this.navCtrl.push('ProfilPage');
    },
    err => {
      console.log(err);
    },
    () => console.log('Call Complete')
  );

}

What i want to do, is once login success, it push me to Profil Page and show informations.
The problem is that my code supposed to do that doesn’t work

Capture
Capture.PNG1374×730 136 KB 

 userPostData = {"user_id":"","token":""};
  constructor(public navCtrl: NavController, public navParams: NavParams, public authService:AuthServiceProvider, public app: App) {
    const data = JSON.parse(localStorage.getItem('userData'));
    this.userDetails = data.userData;
  
    this.userPostData.user_id = this.userDetails.id;
    this.userPostData.token = this.userDetails.remember_token;
  }

And the HTML Part

  <h2>Welcome to {{userDetails.first_name}} {{userDetails.last_name}}</h2>
  <h3>Email: {{userDetails.email}}</h3>
2

check first if localstorage is returning anything else than valid json.

and give ionic storage a try it parses json automaticaly.

3

Check by console.log(data), if your json are saved and get your user details expected

4

Check navcontroller push method documentation. I bet you can pass on the data during the push instead of localstorage to exchange data

1 Like
5

By the way, to improve your code, i suggest to make share service who have role to share userConnectedData to all component of app. It’s best common pratice. The benefict is do not always check userConnectedData by localStorage but by sharedService instance.

6

Any sample of code ?
I am a beginner

7

It give this

Capture
Capture.PNG1381×623 51.3 KB

8

OK no matter,
See my simple shared service

export class MySharedService {
    userConnected: BehaviorSubject<any>;

    constructor() {
      this.userConnected = new BehaviorSubject(JSON.parse(localStorage.getItem('userConnected')));
    }

    setUserData(data: any) {
      this.userConnected.next(data);
    }
    getuserConnectedData() {
      return this.userConnected.asObservable();
    }
}

Here another component/Page who subscribe sharedService

export class AppHeaderComponent implements OnInit {
  userConnected: any;
  constructor (public authService: AuthService, public router: Router, public sharedService: MySharedService) {
    this.sharedService.getuserConnectedData().subscribe( data => {
      this.userConnected = data;
    });
  }
1 Like
9

what data console.log(?) have you done ?

10

The navCtrl.push doesn’t push me to another view (a CORS PHP problem) so i try on login page

connexion(){
  var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
   
  var params = 'email='+this.userData.email+'&passe='+this.userData.passe;
  this.http.post(apiUrl, params , {headers: headers})
  .subscribe(
    data => {
      this.responseData = data,
      //console.log(this.responseData),
      localStorage.setItem('userData', JSON.stringify(this.responseData));

      const dato = JSON.parse(localStorage.getItem('userData'));
      
      console.log(dato);
      this.navCtrl.push('ProfilPage');
    },
    err => {
      console.log(err);
    },
    () => console.log('Call Complete')
  );

}
11

CORS has nothing to do with the nav Controller

12

Capture
Capture.PNG1314×550 54.9 KB

14

No it succeed

Capture
Capture.PNG1371×763 86.4 KB

15

can you provide your php?
the error said that *, * is too much try only *

16

The PHP i am using Laravel… I don’t know exactly wich code i have to provide

<?php

namespace App\Http\Middleware;

use Closure;

class corsorigin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}
}
17

you changed it?
any difference in the result?

18

It was from the begining like that

->header(‘Access-Control-Allow-Origin’, ‘*’)

and the error says that i use ‘,’

19

You don’t need to set CORS Control in your laravel backend. Just install chrome extension Allow-Control-Allow-Origin: * - Chrome Web Store and enable it .

20

But on mobile i can’t use Chrome Extension

21

You don’t need CORS Control on real device. I had faced the same issue in web chrome but in the real device all request from my server online work like a charm. The problem is that when you use > ionic serve only

1 Like