如果登录正确，确定何时将用户发送到主页

Question

我正在开发一个移动应用程序，我需要确定用户何时正确登录以发送到主页，否则用户只能看到登录页面。

我的用户.ts (提供程序(

import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { api } from '../../config/url.api';
import { Observable } from "rxjs/Rx"
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { AlertController, Platform } from 'ionic-angular';
// Plugin storage
import { Storage } from '@ionic/storage';
@Injectable()
export class User {
user_id: string;
user_firstname: string;
constructor( public http: Http, private alertCtrl: AlertController, private platform: Platform, private storage: Storage ) {
// Cargamos el storage con datos almacenados
this.load_storage();
}
login_user( US_EMAIL: string, US_PASSWD: string ){
let data = new URLSearchParams();
data.append( "Usuario_app[US_EMAIL]", US_EMAIL );
data.append( "Usuario_app[US_PASSWD]", US_PASSWD );
let url = "/api" + "/usuario_app/acceso"; // Cambiame en los builds
return this.http.post( url, data )
.map( resp => {
let data_resp = resp.json();
console.log( data_resp );
if( data_resp.ResponseError ) {
// Si el JSON retorna error al enviar datos a la API, mostramos una alerta
this.alertCtrl.create({
title: "Error",
message: data_resp.ResponseError,
buttons: ["Aceptar"]
}).present();
console.log('Hubo un error al iniciar sesión');
} else {
// El JSON retornó sin errores
this.user_id = data_resp.USUARIO.US_ID;
this.user_firstname = data_resp.USUARIO.US_NOMBRE;
// Almacenamos la ID del usuario
this.save_storage();
console.log('Sesión inciada con éxito, se guardó en el storage');
}
})
}
remove_user(){
this.user_id = null;
// guardar storage
this.save_storage();
}
private save_storage(){
if( this.platform.is("cordova") ){
// En el dispositivo
this.storage.set('user_id', this.user_id );
} else {
// En el Computador
if( this.user_id ){
localStorage.setItem("user_id",  this.user_id  );
console.log('Guardé el user_id: ' + this.user_id);
} else {
localStorage.removeItem("user_id");
console.log('Borré de tu local el usuario');
}
}
}
load_storage(){
let promise = new Promise( ( resolve, reject ) => {
if( this.platform.is("cordova") ){
// dispositivo
this.storage.ready()
.then( () => {
this.storage.get("user_id")
.then( user_id => {
if( user_id ) {
this.user_id = user_id;
}
resolve();
})
})
} else {
// computadora
if( localStorage.getItem("user_id") ){
//Existe items en el localstorage
this.user_id = localStorage.getItem("user_id");
console.log('Cargué el user_id: ' + this.user_id);
}
resolve();
}
});
return promise;
}
} 

好的，所以，当用户在登录页面时，有两个选项

• 登录成功 -> 回家
• 登录不正确 ->重试

我尝试了一些代码段，但是当登录不正确时，用户也会转到主页

我的登录名 (页面(

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
// import * as CryptoJS from 'crypto-js';
// import CryptoJS from 'crypto-js';
import * as sha1 from 'js-sha1';
import { User } from "../../providers/user/user";
import { HomePage } from '../../pages/home/home';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
US_EMAIL: string = "";
US_PASSWD: string = "";
constructor(public navCtrl: NavController, public navParams: NavParams, private user: User, private loadingCtrl: LoadingController ) {
// console.log('Mensaje encriptado ' + sha1('Hola soy un mensaje encriptado'));
}
login(){
// Envía la password encriptada en SHA1
this.user.login_user( this.US_EMAIL, sha1(this.US_PASSWD) )
.subscribe( () => {
// Acá tendría que discriminar si enviar o no al usuario al home siempre cuando haya validado su inicio de sesión
// console.log( 'Encripté tu contraseña: ' + sha1( this.US_PASSWD ));
})
}
}

提前，谢谢！

Answer 1

这种类型的功能通常使用路由防护来处理。这里有一个授权示例：https://angular.io/guide/router#milestone-5-route-guards