Angular 4を使ってログインするには？私たちが使用しているテーマは、fack-bakcendプロバイダのコンセプトを使用していますか？

Question

私はAngular 4を初めて使用しています。私が使用しているテーマの構成要素を基本的に理解しています。しかし、デフォルトでは、テーマにはバックエンドのFackバックエンドプロバイダがあります。

auth.component.ts

signin() { 
    this.loading = true; 
    this._authService.login(this.model.username, this.model.password) 
     .subscribe(
     res => { 
      console.log(res); 
      localStorage.setItem('currentUser', JSON.stringify(this.model.username)); 
      // localStorage.setItem("username", "username"); 
      this._router.navigate(['http://localhost:9090/index']); 
     }, 
     error => { 
      this.showAlert('alertSignin'); 
      this._alertService.error(error); 
      this.loading = false; 
     }); 
} 

authentication.service.ts

login(username: string, password: string) { 
    let url = "/login"; 
    let body = new FormData(); 
    body.append('username', username); 
    body.append('password', password); 
    // let body = `username=${username}&password=${password}`; 
    return this.http.post(url, body); 

} 

login.component.html

<form (ngSubmit)="signin()" #f="ngForm" class="m-login__form m-form" action=""> 
         <ng-template #alertSignin></ng-template> 
         <div class="form-group m-form__group"> 
          <input class="form-control m-input" type="text" placeholder="Email" name="username" [(ngModel)]="model.username" #username="ngModel" autocomplete="off"> 
         </div> 
         <div class="form-group m-form__group"> 
          <input class="form-control m-input m-login__form-input--last" type="password" placeholder="Password" name="password" [(ngModel)]="model.password" #password="ngModel"> 
         </div> 
         <div class="row m-login__form-sub"> 
          <div class="col m--align-left"> 
           <label class="m-checkbox m-checkbox--focus"> 
            <input type="checkbox" name="remember" [(ngModel)]="model.remember" #remember="ngModel"> 
            Remember me 
            <span></span> 
           </label> 
          </div> 
          <div class="col m--align-right"> 
           <a href="javascript:;" id="m_login_forget_password" class="m-link"> 
            Forget Password ? 
           </a> 
          </div> 
         </div> 
         <div class="m-login__form-action"> 
          <button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air"> 
           Sign In 
          </button> 
         </div> 
        </form> 

私のコードは、ログに記録されたInを取得しますがリダイレクトされていません。私はこれで間違っていたのですか？

私は非常に多くのリンクを検索しましたが、何も助けられていません。前もって感謝します。

Answer 1

まず、ログイン機能で実際にサポートされている認証を実装するには、/ loginを使用してAPI呼び出しを呼び出す必要があります。実際のAPI URLには、ユーザー名とパスワードをDBとAPIで確認する必要があります呼び出しを生成し、コンポーネントファイルに返信します。

モジュールファイルにルータ定数を作成した場合は、コンポーネントファイルでルータ内の完全パスを指定するだけで/ indexを渡すだけで済みます。