Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Erro ao redirecionar pagina no logout

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

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

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.

Eae Matheus blz

Valeu cara era isso mesmo só falto implementar.

valeu.

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

Abraços e bons estudos.