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;

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

src/pages/login/login.html

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

src/pages/login/login.ts

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’;
…

constructor(public navCtrl: NavController, public appCtrl: App){ …
…

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.