-2

Estou começando agora com o angular e estou com uma dúvida, eu fiz uma tela de login.page.html, depois que o back-end confirma o login e senha o usuário vai para a tela home.page.html nesta tela o usuário terá acesso a um menu de consulta, cada usuário fará a sua consulta com o seu login/senha, mas o angular pelo que eu vi trabalha com classes e se eu setar o login e senha na classe LoginPage e instanciar essa classe na classe HomePage o valor de var login e var senha se perderá, eu li que tem vários jeitos de se fazer injeção, serviço mas não consegui aplicar nem entender nenhum desses conceitos, alguém pra me explicar?

import { Component, Inject, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { AlertController, MenuController } from '@ionic/angular';



@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

public folder: string;
public login: string;
public senha: string;

constructor(
    //private activatedRoute: ActivatedRoute,
    private http: HttpClient,
    private alertController: AlertController,
    private menu: MenuController,
    private router: Router

){

}

async ngOnInit() {

}

async alert(mensagem: string){
    const alert = this.alertController.create({
        header: 'Aviso', message: mensagem,buttons: ['Ok']
      });
    (await alert).present();
}

public conectar() {
    let postData = { "log_login": this.login, "log_senha": this.senha };

    this.http.post<any>(                                                        // Requisição Ajax
        "http://localhost/appBTR/conectar.php",                                 // URL
        JSON.stringify(postData))                                               // Parametros
        .subscribe(                                                             // Retorno
            async data => {                                                     // Caso success
                if( data == 0){                                                 // Login e/ou Senha inválidos!
                    this.alert("Login e/ou Senha inválidos!");                  // Aviso na tela
                }
                else{ this.telaInicio(postData); }                                      // Caso login ok
            },
            async (error: HttpErrorResponse) => {                               // Caso error
                this.alert(error.error.text);
            }
        );
}

telaInicio(postData: object){
    
    // AQUI EU PRECISO DAR UM JEITO DE OU ENVIAR O posData para a home.page.ts
    // OU TRANSFORMA-LO EM GLOBAL
    this.menu.enable(true,'main-menu');
    this.router.navigate(['home']);
}

}
2
  • Não sei se está fazendo algum curso (recomendo), ou aprendendo por conta própria, mas, essa parte de login vai bem mais a fundo em uma aplicação real. Geralmente (senão totalmente) os dados do usuário (login, senha, etc...) são armazenados na sessão do usuário gerando um token de autenticação, jwt e todas essas coisas, aí quando precisa desses dados vc pega isso no front pela API, questão de segurança.
    – LeAndrade
    7/04/2021 às 13:48
  • Quem negativa poderia dizer em palavras o que esta errado na pergunta? 7/04/2021 às 17:52

1 Resposta 1

0

Uma resposta para essa pergunta esta aqui https://www.youtube.com/watch?v=Mz8lb81AAe4

Porém esta em inglês, só copiando o código consegui entender que é possível fazer uma class com @Injectable setar no providers do app.module.ts e fazer o import onde precisar utilizar.

Vi também que é possível usando token consegui copiar e colar e rodou, porém não ficou inteligível pra mim, se alguém puder contribuir vou deixar em aberto a pergunta porque nem sei quais são as diferenças, vantagens etc...

conexao.service.ts

import { Injectable } from '@angular/core';
import { Conexao } from './conexao.modal';

@Injectable({
    providedIn: 'root'
})

export class ConexaoService {

    private conexao: Conexao;

    constructor() { }

    setConexao(conexao: Conexao){
        this.conexao = conexao;
    }

    getConexao(){
        return this.conexao;
    }
}

No app.module.ts

...
@NgModule({
...
   providers: [ConexaoService]
...
({

login.page.ts

import { ConexaoService } from './../share/conexao.service';
import { Conexao } from '../share/conexao.modal';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {
   constructor(private conexaoService: ConexaoService){

   }
   ...
   telaInicio(postData: Conexao){
      // AQUI PASSO O VALOR QUE IRÁ FICAR COMO GLOBAL E ACESSIVEL NA PAGINA INICIO (HOME) APÓS O LOGIN
      this.conexaoService.setConexao(postData); 
      this.router.navigate(['inicio']);
   }
}

inicioPge (home)

import { ConexaoService } from './../share/conexao.service';

@Component({
    selector: 'app-inicio',
    templateUrl: './inicio.page.html',
    styleUrls: ['./inicio.page.scss']

})
export class InicioPage implements OnInit {

    constructor(
        private menu: MenuController,
        private ConexaoService: ConexaoService
    ){

    }

    ngOnInit() {
        this.menu.enable(true, 'main-menu');

        // AQUI É COMO USARIA O VALOR PASSADO DA TELA 'login' para a tela 'inicio'
        console.log("conexao " + this.ConexaoService.getConexao().log_login); 
    }

}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .