使用角度服务将基本身份验证传递给rest api答案

【问题标题】：pass basic auth to rest api using angular services使用角度服务将基本身份验证传递给rest api
【发布时间】：2018-12-27 01:09:29
【问题描述】：

我想使用 Angular 身份验证登录，但在将数据从服务发送到快速休息 API 时，它会显示 401 未经授权的错误。

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();
  }));

}

我在 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":""}:

post方法登录认证的Express api Handler

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)

【问题讨论】：

分享您的 API 处理程序示例。
检查网络请求中的标头，它们真的被发送了吗？
我已经在网络上检查了请求中的标头
首先，摆脱.pipe(map((res: Response) => { return res.json(); })); 块。这并不是真正需要的，因为您使用的是 HttpClient 而不是 Http
看起来您的电子邮件和密码为空。

标签： node.js angular express

【解决方案1】：

append() 不会修改标题。它创建一个 new HttpHeaders 对象并返回它。所以你需要

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

或者干脆

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

【讨论】：

我已经使用了 append() 方法，它仍然显示 401 未经授权的错误。
你用过，但不正确。这就是答案的重点。但你需要真正阅读它。