使用 Angular 服务将基本身份验证传递给 rest api

Question

I want to log in with authentication in angular but while sending data from services to an express rest API it will show a 401 unauthorized error.

login(data) {
  console.log(data);
  const headers_object = new HttpHeaders().append('Content-Type', 'application/x-www-form-urlencoded');

  headers_object.append('Authorization', 'Basic ' + btoa(data.email + ':' + data.password));

  return this.Httpclient.post('http://api/auth', data, {
    headers: headers_object
  })
  .pipe(map((res: Response) => {
    return res.json();
  }));

}

I used an express passport in rest API

Request URL: http://api/auth
Request Method: POST
Status Code: 401 Unauthorized
Remote Address:api
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: bugsnag-api-key,bugsnag-payload-version,bugsnag-sent-at,content-type
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Allow: POST, GET, OPTIONS, PUT, DELETE
Connection: keep-alive
Date: Wed, 26 Dec 2018 16:13:13 GMT
Transfer-Encoding: chunked
WWW-Authenticate: Bearer realm="Users"
X-Powered-By: Express
Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/x-www-form-urlencoded
Origin: http://localhost:4200
Referer: http://localhost:4200/login
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
{"email":"","password":"","access_token":""}: 

Express api Handler for login authentication of post method

import { Router } from 'express'
import { login } from './controller'
import { password, master, facebook, github, google } from '../../services/passport'

const router = new Router()

/**
 * @api {post} /auth Authenticate
 * @apiName Authenticate
 * @apiGroup Auth
 * @apiPermission master
 * @apiHeader {String} Authorization Basic authorization with email and password.
 * @apiParam {String} access_token Master access_token.
 * @apiSuccess (Success 201) {String} token User `access_token` to be passed to other requests.
 * @apiSuccess (Success 201) {Object} user Current user's data.
 * @apiError 401 Master access only or invalid credentials.
 */
router.post('/',
  master(),
  password(),
  login)

Answer 1

append() doesn't modify the headers. It creates a new HttpHeaders object and returns it. So you need

let headers_object = new HttpHeaders().append('Content-Type', 'application/x-www-form-urlencoded');
headers_object = headers_object.append(...);

or simply

const headers_object = new HttpHeaders().append(...)
                                        .append(...);