iOnic 3: exibir página de login sem menu ou tab

Neste post, veremos como fazer com que a página de login de seu App em iOnic não apresente o menu ou o tab abaixo na tela, ou seja, que abra uma tela limpa, somente com os campos de login e senha, por exemplo.

Fluxo

Imagine que o nosso App tenha o seguinte fluxo:

Página Login -> Página Home -> Ação Logout -> Página Login

Definindo a página de login como página inicial

Se você iniciou seu APP com o template Tabs, todas as páginas que você criar, por padrão, abrirão o TABS no rodapé.

Assumindo que você já tenha uma página criada chamada LoginPage (src/pages/login/login.html, etc…), para desativar o tabs nessa página de Login do App, vá para:

src/app/app.component.ts

Após a abertura da classe (export class MyApp{…), altere de:

rootPage:any = TabsPage;

para

rootPage:any = LoginPage;

Código fonte de exemplo, onde há a alteração: src/app/app.component.ts
Código fonte: src/app/app.component.ts

Se desejar, apenas para seguir meu exemplo, poderá colocar o seguinte conteúdo na página:

src/pages/login/login.html

<ion-content padding>
   <ion-item>
      <ion-input type=”text” placeholder=”Usuário”>
   </ion-item>
   <ion-item>
       <ion-input type=”password” placeholder=”Senha”></ion-input>
   </ion-item>
   <button ion-button color=”light” (click)=”login($event)”>Login
</ion-content>

E adicione a chamada de botão login no nosso arquivo login.ts.

src/pages/login/login.ts

login(e){
   console.log(“Faz o login”);
   this.navCtrl.setRoot(TabsPage);
//Chamará a TabsPage padrão, cuja primeira página é a home
}

Chamando o botão de logout

Depois de clicar em login, fomos redirecionados pelo iOnic para a página Home. Agora queremos fazer o logout. Adicione um botão em qualquer parte do seu arquivo home.html. Adicione uma ação click chamada logOut, como no exemplo abaixo:

src/pages/home/home.html

<button ion-button icon-only color=”royal” (click)=”logOut($event)”>
   <ion-iconname=”log-out”></ion-icon>
</button>

Vamos agora criar essa função/método. Antes disso, importe no mesmo arquivo que você irá mexer (home.ts), a classe App do iOnic:

src/pages/home/home.ts

import { App } from ‘ionic-angular’;

Não esqueça de declarar no Constructor…
constructor(public navCtrl: NavController, public appCtrl: App){ …
E agora, vamos ao nosso método/função:
logOut(e){
   console.log(“Chamou o Logout”);
   this.appCtrl.getRootNav().setRoot(LoginPage);
}

Salve e rode seu código. Quando clicar no botão de LogOut, irá abrir a página de Login sem o Tab abaixo.

Espero que tenha ajudado! Quaisquer dúvidas, fico à disposição.

CategoriasSem categoria

3 comentários

  1. Pingback: iOnic: como criar uma página de login bonita | WillBlog

  2. Christiano Santos Responder

    William, muito obrigado por compartilhar seu conhecimento através deste post!, me ajudou bastante! Estou fazendo um App para apresentar no meu TCC com IONIC 3, sou iniciante no IONIC e estava justamente com o problema que você ensinou a resolver. Mais uma vez, Muito Obrigado!

    • William Zimmermann Autor do postResponder

      Olá Christiano! Citando “O Homem Bicentenário”, “Isto fica feliz em ser útil!” Muito obrigado por seu comentário.

Deixe um comentário

O seu endereço de e-mail não será publicado.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.