Solucionado (ver solução)
Solucionado
(ver solução)
16
respostas

Ajuda

Bom, dia...

Como eu poderia implementar o Logout no menu inside?

Eu tentei uma coisa aqui... mas nao deu certo...

na verdade ele ate retorna para o login mas o usuarioLogado fica salvo assim mostrando o menu lateral na pagina de login.

app.componente

private paginas = [
    {titulo: 'sair', componente: LoginPage}

  ];



 sair(pagina): void {

              this.nav.setRoot(pagina.componente.LoginPage);
            }

Poderia ajudar?

agradeço desde ja!

16 respostas

Boa tarde, Renan! Como vai?

Isso que vc fez é um dos passos e está correto! O outro passo que vc precisa dar é tornar nula a variável que guarda o usuário logado. Para isso, vc poderia fazer algo do tipo no serviço serviço que foi criado para gerenciar o usuário:

@Injectable()
export class UsuariosProvider {
  _url: string;
  _http: HttpClient;

  private _usuarioLogado: Usuario;

  constructor(private _api: ApiProvider) {
    this._http = this._api.http;
    this._url = this._api.url;
  }

  // crie esse método para efetuar o logout do usuário
  efetuaLogout() {
    this._usuarioLogado = null;
  }

  // restante do código omitido

}

Daí é só chamar o método efetuaLogout() no método sair() que vc já criou!

Pegou a ideia?

eu fiz assim:

 sair(pagina,efetuaLogout): void {

           this.nav.setRoot(pagina.componente.LoginPage);
           this._service.efetuaLogout();

                      }





    }

Mas não deu certo.

Como está o seu método efetuaLogout()? Cole ele aqui para que eu possa ver o que vc fez.

Além disso, vc disse que não deu certo. O que ocorre na prática? Acontece algum erro, por exemplo?

esta assim, conforme o exemplo:

usuario-service.ts:

efetuaLogout() {
    this._usuarioLogado = null;
  }

}

app.component.ts:

private paginas = [
    {titulo: 'Perfil', componente: PerfilPage },
    {titulo: 'sair', componente: LoginPage}

  ];

sair(pagina,efetuaLogout): void {

           this.nav.setRoot(pagina.componente.LoginPage);
           this._service.efetuaLogout();

                      }



    }

Mas vc disse que não deu certo. O que ocorre na prática? É lançada algum erro, por exemplo? Eu preciso das respostas das perguntas que te fiz para poder te ajudar.

Entao, nao acontece nenhum erro.

No console também nao mostra erro, porem quando eu aperto no botao sair e ele volta para a pagina de login eu ainda consigo acessar o menu lateral

Cole aqui o código do arquivo app.html e do arquivo app.component.ts para eu dar uma olhada.

Segue...

app.html:

<ion-menu  [content]="content" *ngIf="usuarioLogado">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content>
          <ion-list>
            <button menuClose ion-item 
              *ngFor="let pagina of paginas" 
              (click)="abrePagina(pagina)">
              {{pagina.titulo}}
            </button>
          </ion-list>
        </ion-content>

      </ion-menu>

<ion-nav [root]="rootPage" #rootNavController [root]="HomePage" #content swipeBackEnabled="false"></ion-nav>

app.componente.ts:

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any = LoginPage;

 private paginas = [
    {titulo: 'Perfil', componente: PerfilPage },
    {titulo: 'sair', componente: LoginPage}

  ];



  @ViewChild(Nav) public nav: Nav;

  constructor(platform: Platform,
    private _service:UsuarioService) {
    platform.ready().then(() => {

      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  abrePagina(pagina): void {

        this.nav.push(pagina.componente);
      }
      get usuarioLogado(){

            return this._service.obtemDadosUsuario();

        } 
        sair(pagina,efetuaLogout): void {

           this.nav.setRoot(pagina.componente.LoginPage);
           this._service.efetuaLogout();


                      }



    }

Ola,

Passei o dia tentando uma solução e nao consigo nada.

Opa, Renan! Desculpe a demora! Eu estou envolvido na gravação de um outro curso e não tive tempo de responder antes.

Uma coisa que eu percebi é que embora vc tenha feito o método sair() ele não é chamado em lugar nenhum nos códigos que vc postou aqui até agora. Sendo assim, aparentemente essa é a causa do seu problema! Vc precisa fazer com que esse método seja executado quando clicar no item "sair" do seu menu.

Entendi... So nao to sabendo como fazer isso ...

Poderia dar uma dica para me ajudar?

solução!

Claro, Renan! Mas na realidade, não é preciso de nada novo para resolver o problema! Basta aplicar o que vc já sabe!

O primeiro passo é tirar o item "sair" do seu array de páginas em app.component.ts, afinal de contas, essa não é uma navegação comum como as outras! Ele deve ficar assim:

private paginas = [
     {titulo: 'Perfil', componente: PerfilPage }
];

Além disso, altere o método sair(), tbm no arquivo app.component.ts:

sair(): void {

     this._service.efetuaLogout();
     this.nav.setRoot(LoginPage);
}

Por fim, no app.html, faça:

<ion-menu  [content]="content" *ngIf="usuarioLogado">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content>
          <ion-list>
            <button menuClose ion-item 
              *ngFor="let pagina of paginas" 
              (click)="abrePagina(pagina)">
              {{pagina.titulo}}
            </button>

            <button menuClose ion-item (click)="sair()">
              Sair
            </button>
          </ion-list>
        </ion-content>

</ion-menu>

<!-- restante do código omitido -->

Perceba que realmente como eu disse, não usei nada novo! Verifica aí! Isso deve resolver o seu problema!

DICA: Eu vi em seu perfil que vc não fez os cursos de Javascript da Alura. Fazer os cursos dessa linguagem é essencial para ter uma boa base e aproveitar ao máximo os cursos um pouco mais avançados como é esse de Ionic 3!

Eu mexi tanto que acabei ficando perdido.

enfim, fiz como disse e retorno o seguinte erro no console:

content.js:525 Uncaught TypeError: Cannot read property 'ev' of null
    at Content._readDimensions (VM955 main.js:10891)
    at dispatch (VM955 main.js:4839)
    at DomController._flush (VM955 main.js:4813)
    at rafCallback (VM955 main.js:4806)
Content._readDimensions @ content.js:525
dispatch @ dom-controller.js:128
DomController._flush @ dom-controller.js:102
rafCallback @ dom-controller.js:95
requestAnimationFrame (async)
Platform.raf @ platform.js:540
DomController._queue @ dom-controller.js:94
DomController.read @ dom-controller.js:64
Content.resize @ content.js:499
Menu._before @ menu.js:420
Menu.setOpen @ menu.js:346
Menu.close @ menu.js:462
MenuClose.close @ menu-close.js:36
Wrapper_MenuClose.handleEvent @ /IonicModule/MenuClose/wrapper.ngfactory.js:39
View_MyApp1.handleEvent_17 @ /AppModule/MyApp/component.ngfactory.js:333
(anonymous) @ view.js:408
(anonymous) @ dom_renderer.js:276
t.invokeTask @ polyfills.js:3
onInvokeTask @ ng_zone.js:227
t.invokeTask @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
animation.js:286 Uncaught TypeError: Cannot read property 'raf' of null
    at VM955 main.js:6473

Eu mexi tanto que acabei ficando perdido.

Então a chance é grande de ter sobrado algo do que vc fez ou ter confundido algo do que eu falei pra fazer.

Vc consegue compartilhar o seu projeto cmg por github ou google drive? Se sim, não mande junto a pasta node_modules.

Gabriel deu certo agora...

Muito obrigado pela força...

abrass

Por nada, Renan!

Grande abraço e bons estudos, meu aluno!