带有 Angular4 的 Laravel 5.4：护照请求令牌答案

【问题标题】：Laravel 5.4 with Angular4: Passport request token带有 Angular4 的 Laravel 5.4：护照请求令牌
【发布时间】：2018-01-02 06:37:55
【问题描述】：

我想通过 API 请求 Token：

Signin(email: string, password: string): void {
    let data: Object = {
        client_id: 2,
        client_secret: 'vSFxVqALQHjyotPyGfhrGj3ziudUGsts2ZWiAGms',
        grant_type: 'password',
        username: email,
        password: password,
    };

    this._HTTP.post(
        this.OAuth + 'token',
        data,
        {headers: this.Headers}
    ).toPromise()
    .then( (_response) => {
       console.log (_response); 
    });
}

我收到 401 Unauthorized 错误

21:54:03.996 错误错误：未捕获（承诺中）：响应状态：401 未经授权的 URL：http://localhost:8000/oauth/token

我不明白为什么会出现这个错误，我在内核 -> 中间件 -> web 中添加了这个：

\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,

【问题讨论】：

标签： angular laravel token laravel-passport

【解决方案1】：

你应该使用 content-type application/x-www-form-urlencoded 并有这样的角度服务：

 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

 import { environment } from '../../../environments/environment';
 import { HttpApi } from '../http/http-api';

 const OAUTH_DATA = environment.oauth;

 @Injectable({
   providedIn: 'root'
 })
 export class AuthenticationService {

   constructor(private http: HttpClient) { }

   public loginWithUserCredentials(username: string, password: string): Observable<any> {
     let headers = new HttpHeaders();
     headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');

     const body = new URLSearchParams();
     body.set('grant_type', 'password');
     body.set('client_id', OAUTH_DATA.client_id);
     body.set('client_secret', OAUTH_DATA.client_secret);
     body.set('username', username);
     body.set('password', password);
     body.set('scope', OAUTH_DATA.scope);

     return this.http.post(HttpApi.oauthLogin, body.toString(), {headers: headers})
       .pipe(map((response: any) => {
           localStorage.setItem('session', JSON.stringify(response));
           return response;
        }));
   }

}

在 laravel 中：

护照配置（更改：https://github.com/dedd1993/laravel-oauth2-server/commit/da17f500be60958378be898021414383b541961e）。
添加cors (https://github.com/barryvdh/laravel-cors)，这里是一个例子https://github.com/dedd1993/laravel-oauth2-server/commit/e0b942cd3674fd0464cdbb3572cf7a8bd7849755
最后，将您的 APIS 分组到 auth 中间件中，这里是一个示例 https://github.com/dedd1993/laravel-oauth2-server/commit/5b05538e2d102e00949edc667b85df102f770186

两个例子我都有

Angular 完整项目：https://github.com/dedd1993/ngx-admin

Laravel 基本认证：https://github.com/dedd1993/laravel-oauth2-server

【讨论】：