Question

我正在开发这个特殊的离子应用程序，这让我头疼不已。我还不熟悉ionic，但能够成功创建登录页面和注册页面。

我的主要问题是，当用户的登录详细信息对用户的个人资料页面有效时，将通过我的api从数据库中获取所有值。我希望用户的详细信息（用户名和电子邮件）在成功登录后从一页传递到另一页。

下面是我的源代码。

Login.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

    // Access-Control headers are received during OPTIONS requests

    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))

            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");        

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))

            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);

    }

  require "config.php";

    $data = file_get_contents("php://input");

    if (isset($data)) {

        $request = json_decode($data);

        $username = $request->username;

        $password = $request->password;

                }

      $username = mysqli_real_escape_string($con,$username);

      $password = mysqli_real_escape_string($con, $password);

       $username = stripslashes($username);

      $epassword = encryptIt($password);

    $sql = "SELECT * FROM user WHERE username = '$username' and password = '$epassword'";

      $result = mysqli_query($con,$sql);

      $row = mysqli_fetch_array($result,MYSQLI_ASSOC);

      $active = $row['active'];

      $count = mysqli_num_rows($result);



      // If result matched myusername and mypassword, table row must be 1 row                    

      if($count >0) {

     $response= "Your Login success";


      }else {

    $response= "Your Login Email or Password is invalid";         

      }

 echo json_encode( $response);

Login.ts

import { Component, ViewChild  } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { RegisterPage } from '../register/register';
import {Http, Headers, RequestOptions}  from "@angular/http";
import { LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/map';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})


export class LoginPage {

  @ViewChild("username") username;

  @ViewChild("password") password;

  data:string;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController,
     private http: Http, public loading: LoadingController, public navParams: NavParams) {

  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  registerPage(){
    this.navCtrl.push(RegisterPage);
  }


  signIn(){

    //// check to confirm the username and password fields are filled

    if(this.username.value=="" ){

    let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Username field is empty",

    buttons: ['OK']

    });

    alert.present();

    } else

    if(this.password.value==""){

    let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Password field is empty",

    buttons: ['OK']

    });

    alert.present();

    }

    else

    {

    var headers = new Headers();

    headers.append("Accept", 'application/json');

    headers.append('Content-Type', 'application/json' );

    let options = new RequestOptions({ headers: headers });

    let data = {

    username: this.username.value,

    password: this.password.value

    };

    let loader = this.loading.create({

    content: 'Processing, please wait…',

    });

    loader.present().then(() => {

    //this.http.post('http://localhost:90/totallight/api/login.php',data,options)

    this.http.post('http://edomonitor.com/school-evaluation-api/login.php',data,options)

    .map(res => res.json())

    .subscribe(res => {

    console.log(res)

    loader.dismiss()

    if(res=="Your Login success"){

    //Store all json data and pass them to UserPage

    /*let alert = this.alertCtrl.create({

    title:"CONGRATS",

    subTitle:(res),

    buttons: ['OK']

    });

    alert.present();*/   
    }else

    {

    let alert = this.alertCtrl.create({

    title:"ERROR",

    subTitle:"Invalid username/password",

    buttons: ['OK']

    });

    alert.present();

    }

    });

    });

    }

    }

}

Answer 1

更好地创建新服务来处理Auth请求

然后您可以在成功登录响应后调用以下函数

this.authService.setToken(data.token, data.id, data.name, data.email);

然后在AuthService.ts中添加新方法来存储登录用户数据

setAccessToken(token: string, id: number, name: string, email: string) {

    this._accessToken = token;
    this.id = id;
    this.name = name;
    this.email = email;

    // Save to Storage for future reference 

    this._storage.set('loggedInUser', {
      token: token,
      id: id,
      name: name,
      email: email
    });

    // Log User 
    this._events.publish('user:login');
}

然后在app.components.ts中添加喜爱的代码

ngOnInit() {
    this._events.subscribe('user:login', (userEventData) => {
      this.rootPage = HomePage;
   }
}

然后您将可以在

之类的任何页面中获取用户数据。

HomePage.ts

export class HomePage {

  constructor(
    private _auth: AuthService,
  ) {}
}

HomePage.html

<h2 class="user-name>{{ _auth.name }} </h2>

通过api将ionic中的json中的所有数据传递到用户页面

1 个答案:

HomePage.ts

HomePage.html