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

Erro ao redirecionar pagina no logout

Referente ao curso Angular parte 2: Autenticação, Forms e lazy loading, no capítulo Usuário logado e proteção de rotas e atividade Implementação do logout

por Gabriel Bartholo Batista
| 401.5k xp | 422 posts

Estou acompanhando o projeto conforme as aulas, porém ao fazer o logout não carrega a página de login, somente o cabeçalho.

Erro

ERROR Error: Uncaught (in promise): Error: Method not implemented.
Error: Method not implemented.
    at PhotoListComponent.push../src/app/photos/photo-list/photo-list.component.ts.PhotoListComponent.ngOnDestroy (photo-list.component.ts:15)
    at callProviderLifecycles (core.js:9566)
    at callElementProvidersLifecycles (core.js:9534)
    at callLifecycleHooksChildrenFirst (core.js:9524)
    at destroyView (core.js:10586)
    at callWithDebugContext (core.js:11344)
    at Object.debugDestroyView [as destroyView] (core.js:11028)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.destroy (core.js:8861)
    at ComponentRef_.push../node_modules/@angular/core/fesm5/core.js.ComponentRef_.destroy (core.js:8698)
    at RouterOutlet.push../node_modules/@angular/router/fesm5/router.js.RouterOutlet.deactivate (router.js:4768)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)

header.component.ts

import { Component } from '@angular/core';
import { UserService } from '../user/user.service';
import { Observable } from 'rxjs';
import { User } from '../user/user';
import { Router } from '@angular/router';

@Component({
    selector: 'ap-header',
    templateUrl: './header.component.html'
})
export class HeaderComponent { 

    user$: Observable<User>;

    constructor(
        private userService: UserService, 
        private router: Router) {

        this.user$ = userService.getUser();
    }

    logout() {
        this.userService.logout();
        this.router.navigate(['']);
    }
}

header.component.html

<header class="sticky-top">
    <nav class="navbar navbar-light bg-white">
        <a class="navbar-brand">ALURAPIC</a>

        <div *ngIf="(user$ | async) as user; else login"><!--usuario logado? se nao #login-->
           <!--Com o pipe async conseguimos capturar a emissão do Observable direto do nosso template.-->
            <i class="fa fa-user-circle mr-1"></i>
            <a class="mr-1">{{ user.name}}</a>
            <a (click)="logout()">(Logout)</a><!--ao clicar vai chamar o metodo logout do component header-->
        </div>

        <ng-template #login>
            <span class="navbar-text">
                Please, login!
            </span>
        </ng-template>

    </nav>
</header>
4 respostas
por Gabriel Bartholo Batista
| 401.5k xp | 422 posts

user.service.ts

import { Injectable } from "@angular/core";
import { TokenService } from "../token/token.service";
import { BehaviorSubject } from "rxjs";
import { User } from './user';
import * as jtw_decode from 'jwt-decode';

@Injectable ({providedIn:'root'})
export class UserService {

    private userSubject = new BehaviorSubject<User>(null);//valor padrao que sera emitido logo na sua criação, emitir o valor e guarda até pegar (se inscrever, no caso o header)
    //O BehaviorSubject armazena a última emissão até que alguém apareça para consumí-la.
    constructor(private tokenService: TokenService){

        this.tokenService.hasToken() && //tem token(ja tenha logado e fechou a pagina)? 
            this.decodeAndNotify();//caso tenha chama o metodo decode
    }

        setToken(token:string){
            this.tokenService.setToken(token);//guarda o token, quando for logar
            this.decodeAndNotify();//chama o metodo decode
        }
        getUser(){
            return this.userSubject.asObservable();//para chamar e assim poder se inscrever pra ter acesso  
        }

        private decodeAndNotify(){
            const token = this.tokenService.getToken(); //pega o token que foi armazenado
            const user = jtw_decode(token) as User;//decodifica o token
            this.userSubject.next(user);
        }
        logout(){
            this.tokenService.removeToken();//1º coisa remover o token
            this.userSubject.next(null);//emitir valor null com o next para aparecer a mensagem please, login no header
        }
 }

core.module.ts

import { NgModule } from "@angular/core";
import { HeaderComponent } from "./header/header.component";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";

@NgModule ({
    declarations:[HeaderComponent],
    imports:[
        CommonModule,
        RouterModule
    ],
    exports:[HeaderComponent]
})
export class CoreModule {}
solução!
por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

Fala aí Gabriel, tudo bem? O problema parece estar no seu PhotoListComponent, provavelmente na linha 15.

Você chegou a implementar o ngOnDestroy?

Poste o código completo do PhotoListComponent, ficaria mais fácil tentar lhe ajudar.

Fico no aguardo.

por Gabriel Bartholo Batista
| 401.5k xp | 422 posts

Eae Matheus blz

Valeu cara era isso mesmo só falto implementar.

valeu.

por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

Mágina Gabriel, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software