7
respostas

Minha página de login, ficou em branco.

´´´´´

ALURAPIC
    <div *ngIf="(user$ | async) as user; else login">
    <i class="fa fa-user-circle mr-1"></i>
    <a class="mr-1">{{user.name}}</a>
    <a (click)="logout()">(Logout)</a>
    </div>

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

</nav>
´´´´
7 respostas
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(['']);
    }
}

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

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

private userSubject = new BehaviorSubject<User>(null);
private userName:string;

constructor(private tokenService: TokenService) {

    this.tokenService.hasToken() &&
    this.decodeAndNotify
 }

setToken(token: string) {
    this.tokenService.setToken(token);
    this.decodeAndNotify();
}

getUser() {
 return this.userSubject.asObservable();
}


private decodeAndNotify(){
 const token = this.tokenService.getToken()   
 const user= jtw_decode(token) as User;
 this.userName=user.name;
 this.userSubject.next(user);
}

logout (){
     this.tokenService.removeToken();
     this.userSubject.next(null);
 }

 isLogged() {
    return this.tokenService.hasToken();
}

getUserName(){
    return this.userName;
}

}
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from '../user/user.service';

    @Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {


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

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {

            if (this.userService.isLogged()){
                this.router.navigate(['user',this.userService.getUserName()])
                return false;
            }
            return true;
    }
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PhotoListComponent } from './photos/photo-list/photo-list.component';
import { PhotoFormComponent } from './photos/photo-form/photo-form.component';
import { NotFoundComponent } from './errors/not-found/not-found.component';
import { PhotoListResolver } from './photos/photo-list/photo-list.resolver';
import { SignInComponent } from './home/signin/signin.component';
import { AuthGuard } from './core/auth/auth.guard';

const routes: Routes = [
    {
         path: '',
     component: SignInComponent,
     canActivate: [AuthGuard]

    },
    {
         path: 'user/:userName',
        component:PhotoListComponent,
        resolve:{
         photos:PhotoListResolver
     } 
     },



    { path: 'p/add', 
    component: PhotoFormComponent 
},

    { path: '""', 
    component: NotFoundComponent 
}
];

@NgModule({
        imports:
         [ RouterModule.forRoot(routes) 
         ],
        exports: [ RouterModule ]

})
export class AppRoutingModule { }

Fala ai Amanda, tudo bem? Olhando os códigos é bem complicado achar o problema, posso deixar passar algum detalhe.

Posso te pedir um favor? Compartilha o projeto completo comigo, assim eu consigo simular o problema e analisar com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Ainda não sei fazer isso.

Fala Amanda, poxa, ai fica bem complicado eu conseguir te ajudar, olhando apenas os códigos eu posso deixar passar varios detalhes facilmente.

Porém, com o projeto e vendo o problema, fica bem mais simples e fácil.

Abraços.