2016-12-01 10 views
0

私は、ユーザがログインしてアプリケーションをログアウトできるように、認証サービスでAngular 2アプリ(v2.1.0を使用)を持っています。ユーザーがログインするときに設定できるグローバルに利用可能なブール型プロパティを作成したいと思います。ユーザーの状態に基づいてUIの一部を簡単に表示および非表示にすることができます。 isAuthenticatedのようなものは問題ありません。しかし、グローバルクラス/サービスを作成するのが最善の方法であるか、推奨される方法が何であるかは完全にはわかりません。私はそれに対処するthis質問を見つけましたが、最終的なリリースが出る前にすべての回答が途中から出ていて、私は時代遅れと信じています。または追加する*あなたが使用することを試みることができる角2:グローバルな設定可能な観測可能なプロパティを作成しますか?

IsAuthenticated: boolean = this.authService.isAuthenticated(); 
+0

最初に、ブール変数は、アプリケーションからアクセスできるように、オブジェクト(サービス)のプロパティである必要があります。認証サービスはそれに合った場所のように見えます - それはそれに属しているからです! 2つ目は、スカラープロパティではなく、オブザーバブル(サブジェクト)として持つことが有益であるということです。 – estus

+0

したがって、auth.serviceがapp.moduleのプロバイダとして設定されている場合は、すべてのコンポーネントで使用できるはずです。その場合、auth.serviceを参照するコンポーネントでインスタンス化する必要がありますか?また、ブール値をObservableに変換する最良の方法は何ですか?ありがとう – Eddie

+0

それは 'インスタンス化'が何を意味するかによって異なります。しかし、一般的には、ルートインジェクタのプロバイダとして定義し、他の場所に注入する必要があります。 'isAuthenticated()'がどのように動作するかによって異なります。ブール値はオブザーバブルに「変換」することはできません。 Observablesは 'isAuthenticated()'によって返された内部のauth状態を設定するメカニズムと同じメカニズムによって新しい値を提供されるべきです。 – estus

答えて

0

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

+0

実際、私はすでにそれを持っていますが、状態が変わると更新されません。 Observableではないと思われます... Eddie

0

まずあなたがapp.moduleプロバイダーであなたのAuthServiceを宣言する必要があります。あなたのすべてのアプリケーションのためのauthServiceの1インスタンス。

<a *ngIf="!authService.isAuthenticated()" [routerLink]="['/login']">Login</a> 
0

はあなたのサービスにブール型プロパティを追加し、falseにデフォルト:

次はそれを行うことができます。ユーザーがログインするとtrueに設定されます。ブール値を返す関数をサービス内に作成します。次に、あなたのログイン機能を呼び出すように呼び出すだけです。

サービスはシングルトンであり、あなたが求めているものだけです。

関連する問題