web-dev-qa-db-ja.com

現在のユーザーIDを取得する方法angular 4？

アプリのさまざまな部分で使用するには、現在のユーザーIDを取得する必要があります。

login.component.ts：

onSignin(form: NgForm){
const UserName = form.value.UserName;
const Password = form.value.Password;
this.authService.signinUser(UserName,Password).map(res => res.json())
 .subscribe(
   data => {
     if (data.Id == 0){
     this.invalid=true;
    }
    else{
      localStorage.setItem('isLoggedin', 'true');
      this.router.navigate(['/calendar']);
      console.log('Ok');
   }})}

auth.service.ts：

signinUser(UserName,Password): Observable<any>{
  return this.http.get('http://api.##.com/api/security/signin?username='+UserName+'&password='+Password);
}
angulartypescriptuserid
4
Aya Abdelaziz

IDを含むトークンをバックエンドから渡すか、アプリケーションが使用するフロントエンドにIDを保存するreduxストアを使用できます。以下は、angularのng2 Reduxパッケージのリンクです。 https://www.npmjs.com/package/ng2-redux ローカルストレージに保存するオプションもありますが、お勧めしません。または、セッションストレージを使用してデータを保存できますこのようなフロントエンドで

ログインコンポーネントファイルのセッションに保存するには、このコードを使用します

sessionStorage.setItem('id', data.id);
retrieving from the session//
var data = sessionStorage.getItem('id');
console.log(data) to see the id in the console
3
Abhishek Singh

サービス呼び出しから取得したユーザーIDをアプリのさまざまなコンポーネントに使用したい。これがあなたが探しているものであることを願っています。

これを行うには、3つの方法があります。

  1. Shared Services -共有サービスを利用して、サービスのユーザーIDサブジェクトにユーザーIDを追加し、これを設定しますログイン時刻。次にユーザーIDが変更されたときに、監視コンポーネントに通知されます。
  2. [〜＃〜] ngrx [〜＃〜] -共有サービスのはるかにクリーンな実装、私はあなたにアプリが巨大な場合に使用します。
  3. ローカルストレージ-ユーザーの裁量にも依存するため、これは非常に議論の余地があります。コンポーネント間のユーザーIDを設定および取得します。

ユーザーがNGRXまたは共有サービスでページをハードリフレッシュすると、データが失われるため、完全な校正のためにローカルストレージを使用する必要がある場合があることに注意してください。

2
Rahul Singh