Как реализовать авторизацию через «login»?

Question

nckb @nckb

Angular

Как реализовать авторизацию через «login»?

Я хочу сделать авторизацию через login. Но у меня выходит такая ошибка в консоли:

POST localhost:3000/auth/sign_in 401 (Unauthorized)
scheduleTask @ zone.js:2969
ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
(anonymous) @ http.js:1640
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
ConnectableObservable.connect @ ConnectableObservable.js:42
RefCountOperator.call @ refCount.js:25
Observable.subscribe @ Observable.js:157
Angular2TokenService.handleResponse @ angular2-token.es5.js:719
Angular2TokenService.request @ angular2-token.es5.js:699
Angular2TokenService.post @ angular2-token.es5.js:609
Angular2TokenService.signIn @ angular2-token.es5.js:481
AuthService.logInUser @ auth.service.ts:31
SignInComponent.signIn @ sign-in.component.ts:53
(anonymous) @ SignInComponent.html:23
handleEvent @ core.js:13547
callWithDebugContext @ core.js:15056
debugHandleEvent @ core.js:14643
dispatchEvent @ core.js:9962
(anonymous) @ core.js:10587
(anonymous) @ platform-browser.js:2628
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4740
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

Я ни как не могу найти проблему, в rails уже весь код проштудировал, возможно я на косячил в Angular.

Я внес небольшую правку в модели модуля angular2-token расположенном в папке node_modules:

angular2-token.model.d.ts:

export interface SignInData {
    login: string;
    email?: string;
    password: string;
    userType?: string;
}
...

auth.service.ts:

import { Injectable } from '@angular/core';
  import {Angular2TokenService} from 'angular2-token';
  import {Response} from '@angular/http';
  import {Subject} from 'rxjs/Subject';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/operator/map';

  @Injectable()
  export class AuthService {

    userSignedIn$:Subject<boolean> = new Subject();

    constructor(private authService:Angular2TokenService) {
      this.authService.validateToken().subscribe(
        res => res.status === 200 ? this.userSignedIn$.next(res.json().success) : this.userSignedIn$.next(false)
    );
  }

    logInUser(signInData: {login:string, password:string}):Observable<Response>{

      return this.authService.signIn(signInData).map(
          res => {
            this.userSignedIn$.next(true);
            return res
          }
      );

    }
  }

sign-in.component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../services/auth/auth.service";
import { Router, NavigationEnd } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";


@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss']
})

export class SignInComponent implements OnInit {

  form: FormGroup;


  constructor(
    private _authService: AuthService,
    private router:Router,
    private _formBuilder: FormBuilder
  ) { 
  }

  ngOnInit() {
    this.form = this._formBuilder.group({
      login: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(4)]]
    })
  }

  signIn(): void {
    this._authService.logInUser(this.form.value).subscribe(
      () => {
        this.router.navigate(['profile']);
      },
      (error) => {
         console.log(error);
      }
    )
  }

}

sign-in.component.html:

<form  class="form" [formGroup]="form" (keyup.enter)="signIn()" >
<div class="form-group form-black label-floating is-empty">
<label class="control-label" for="login">Login:</label>
<input formControlName="login" type="text" class="form-control validate" required>
</div>
<div class="form-group form-black label-floating is-empty">
<label class="control-label" for="password">Password:</label>
<input type="password" id="password-show" formControlName="password"  class="validate form-control" required>
</div>
</form>
<button type="submit" (click)="signIn()" [disabled]="!form.valid" class="btn btn-info pull-right">Login in</button>