如何在 Angular 7 + Laravel 5.7 的请求标头中正确附加 JWT 令牌答案

【问题标题】：How to properly append JWT token in request header in Angular 7 + Laravel 5.7如何在 Angular 7 + Laravel 5.7 的请求标头中正确附加 JWT 令牌
【发布时间】：2019-04-13 04:05:40
【问题描述】：

我在我的 Angular 7 应用程序中的 UsersService 中有这个。

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, URLSearchParams } from '@angular/http';
import { ApiService } from '../../services/api.service';

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

  public headers: Headers;
  public options: RequestOptions;

  constructor(
    private http: Http,
    public api: ApiService
  ) {

    this.headers = new Headers({
      'Content-Type':'application/x-www-form-urlencoded',
      'X-Token': localStorage.getItem('token')
    });
    this.options = new RequestOptions({ headers: this.headers });

  }

  getAll(){

    return this.http.get(`${this.api.url}/api/users`, this.options);

  }

}

此服务将向我的 Laravel 5.7 应用发送 HTTP 请求，端点为 /users

Laravel 路由api.php:

<?php

Route::group([

    'middleware' => 'api'
    // 'prefix' => 'auth'

], function ($router) {

    /**
     * Authentication API
     */
    Route::post('login', 'AuthController@login');
    Route::post('signup', 'AuthController@signup');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('me', 'AuthController@me');

    /**
     * Users API
     */
    Route::get('users', 'UsersController@index');

});

LaravelUsersController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;
use App\User;

class UsersController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth:api');
    }

    /**
     * Get all Users
     * 
     */
    public function index()
    {

        $user = User::all();

        return response()->json($user);

    }
}

当尝试调用上述端点时，它会返回一个错误：

message:"Unauthenticated."

如何正确附加 JWT Token 以在端点中发送？

【问题讨论】：

需要将'Authorization': 'Bearer ${token}'作为header传递，也

标签： angular laravel rest http-headers jwt

【解决方案1】：

首先从

导入HttpHeaders

import { HttpClient, HttpHeaders,HttpResponse } from '@angular/common/http';

private token=localStorage.getItem('token');

现在按以下方式创建http头

private httpOptions = {
    headers: new HttpHeaders({'Authorization': 'Bearer ' +this.token ,'Content-Type':'application/json', 'X-Requested-With':'XMLHttpRequest'})
  };

【讨论】：