사용자가 로그인하고 앱을 로그 아웃 할 수 있도록 인증 서비스와 함께 Angular 2 앱 (v2.1.0 사용)이 있습니다. 사용자가 로그인하거나 로그 아웃 할 때 설정할 수있는 전역 적으로 사용 가능한 부울 속성을 만들고 싶습니다. 따라서 사용자 상태에 따라 UI의 일부를 쉽게 표시하고 숨길 수 있습니다. isAuthenticated 같은 것이 좋을 것입니다. 그러나 글로벌 클래스/서비스를 만드는 것이 가장 좋은 방법인지 또는 권장되는 방법이 무엇인지는 잘 모릅니다. 나는 그것을 해결하는 this 질문을 발견했다. 그러나 최종 답변이 나오기 전에 모든 대답이 길에서 나온다. 나는 구식이라고 믿는다. 또는 추가 * 당신은 사용을 시도 할 수각도 2 : 설정 가능하고 관찰 가능한 전역 속성 만들기?
IsAuthenticated: boolean = this.authService.isAuthenticated();
ngIf : 현재 본인은 인증 서비스로 돌아갑니다 상태에 기록하지만, 나에게 비효율적 인 것 같습니다 추적 할 필요 모든 구성 요소의 속성을 요소 제거 | 자세한 내용에 대한 숨길 수있는 가시성거나 표시 할 요소
<div *ngIf="IsAuthenticated">Content</div> //add or remove
<div [class.hidden]="!IsAuthenticated">Show with class</div> //show or hide
는 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf
사실, 이미 가지고 있지만 상태가 변경되면 업데이트되지 않습니다. Observable이 아니기 때문에 그럴 것 같습니다 ... – Eddie
먼저 당신이 app.module 업체에 authService를 선언해야합니다. 모든 응용 프로그램에 대해 authService의 1 인스턴스.
다음 해당 작업을 수행 할 수 있습니다
<a *ngIf="!authService.isAuthenticated()" [routerLink]="['/login']">Login</a>
은 당신의 서비스에 부울 속성을 추가하고 false로 기본. 사용자가 로그인하면 true로 설정됩니다. 서비스에서 boolean 값을 반환하는 함수를 만듭니다. 그런 다음 로그인 기능을 호출하는 것처럼 호출하십시오.
서비스는 싱글 톤이며 사용자가 요구하는 것입니다.
가장 먼저 부울 변수는 앱에서 액세스 할 수 있도록 일부 개체 (서비스)의 속성이어야한다는 것입니다. Auth 서비스는 합리적인 장소처럼 보입니다. 두 번째로 스칼라 속성 대신 관찰 가능 (주체)으로 사용하는 것이 유익하다는 것입니다. – estus
auth.service가 app.module의 Provider로 설정되면 모든 구성 요소에서 사용할 수 있어야합니다. 맞습니까? 그렇다면 auth.service를 참조 할 구성 요소에 인스턴스화해야합니까? 또한 부울을 Observable로 변환하는 가장 좋은 방법은 무엇입니까? 감사합니다 – Eddie
그것은 '인스턴스화'가 무엇을 의미하는지에 따라 다릅니다. 하지만 일반적으로 루트 인젝터의 공급자로 정의되고 다른 곳으로 주입되어야합니다. 'isAuthenticated()'가 어떻게 작동하는지에 달려 있습니다. Boolean은 observables로 '변환'될 수 없습니다. Observables는'isAuthenticated()'에 의해 반환 된 내부 인증 상태를 설정하는 메커니즘과 동일한 메커니즘에 의해 새로운 값을 제공 받아야합니다. – estus