angulaire 2 ngIf avec observables?

J'ai une question très simple service et de son travail consiste à obtenir soit 200 ou 401 de l'api/authentifier url.

auth.service.ts

@Injectable()
export class AuthService {

    constructor(private http: Http) {

    }

    authenticateUser(): Observable<any> {
        return this.http.get(AppSettings.authenitcationEnpoint)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(response: Response) {
        let body = response;
        return body || {};
    }

    private handleError(error: Response) {
        let errMsg: string;
        if (error instanceof Response) {
            errMsg = `${error.status} - ${error.statusText || ''}`;
        } else {
            errMsg = error.toString();
        }
        return Observable.throw(errMsg);
    }
}

maintenant je veux l'utiliser dans mon code html, je sais que je peux créer un abonné et en fonction de la réponse ou un code d'erreur définir une variable, mais mon problème est que je vais avoir à dupliquer le code dans tous les sens. Je veux très simple

<div *ngIf="authService.AuthenticateUser()">my content</div>

Si son 401 qui est à venir à partir de handleError alors de le cacher sinon afficher la div.

Son comme obtenir une valeur booléenne à partir d'Observables. J'ai aussi AuthGuard.

authguard.ts

@Injectable()
export class AuthGuard implements CanActivate {

    private isActive: boolean = true;
    constructor(private authService: AuthService, private router: Router) {
    }

    canActivate(): boolean {
        this.authService.authenticateUser()
            .subscribe(() => {},
            error => {
                if (error.indexOf("401") >= 0) {
                    let link = ['contactus'];
                    this.router.navigate(link);
                    this.isActive = false;
                }
            });
        return this.isActive;
    }   

}

Je ne peux pas utiliser authGuard.canActive() comme dans ngIf. Est-il un moyen plus facile de le faire sans duplication de code. Je suis assez sûr AuthGuard n'est pas le travail comme il doit retourner true, à chaque fois, parce que abonnez-vous va prendre du temps.

app.composante.ts

export class AppComponent {
    private isAuthenticated: boolean = false;

    constructor(private authService: AuthService,private authGuard: AuthGuard) {
        this.authService.authenticateUser()
            .subscribe(response => {
                if (response.status == 200)
                    this.isAuthenticated = true;
            },
            error => {
                if (error.indexOf("401") >= 0)
                    this.isAuthenticated = false;
            });
    }
}

la maison.composante.ts

export class HomeComponent implements OnInit {

    constructor(private http: Http, private authService: AuthService, private utilityService: UtilityService, private homeService: HomeService, private factoryService: FactoryService, private supplierService: SupplierService, private businessAreaService: BusinessAreaService, private router: Router) {
        this.authService.authenticateUser()
            .subscribe(response => {
                if (response.status == 200)
                    this.isAuthenticated = true;
            },
            error => {
                if (error.indexOf("401") >= 0)
                    this.isAuthenticated = false;
            });
        this.customData = new CustomData(http);
    }
}

Comme vous pouvez le voir beaucoup de code dupliqué. J'essaie d'éviter les doubles emplois.

Quand je l'appelle mon api un pop up s'affiche pour entrer dans windows nom d'utilisateur/mot de passe pour l'Authentification windows. Je n'obtiens 401 jusqu'à ce que je annuler cette pop up. si je veux cacher mon menu + la maison de la composante.

Dans mon service je reçois la réponse:200 carte
non autorisé:401 dans attraper bloc

OriginalL'auteur Kamran Pervaiz | 2016-12-05