如何在 api 调用中以 angular 传递授权头令牌

Question

我正在使用 get api 调用来使用 http 从 json doc 中获取数据。但是我只启用了对令牌持有者的授权。localStorage.getItem("token");当我调用 get 请求时，我想在标题中的 Authorization 中传递令牌的值（我可以通过）。

API.SERVICE.TS

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient, HttpRequest, HttpEventType, HttpHeaders, HttpParams, HttpEvent, HttpErrorResponse, HttpResponse } from '@angular/common/http';

import 'rxjs/add/operator/map';

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

  constructor(private http: Http) { }

  getTransferIp(){
    return this.http.get('http://localhost:3003/transferip').map(res => res.json() );
  }

}

目前，只有当我关闭节点服务器获取路由器中的身份验证时，我才被允许获取数据......但我不想这样做，也不使用拦截器

在下面附加节点服务器文件...

授权文件

const jwt = require('jsonwebtoken')
const User = require('../models/user')

const auth = async (req, res, next) => {
    try {
        const token = req.header('Authorization').replace('Bearer ', '')
        const decoded = jwt.verify(token, 'mango@123')
        const user = await User.findOne({ _id: decoded._id, 'tokens.token': token })

        if (!user) {
            throw new Error()
        }

        req.token = token
        req.user = user
        next()
    } catch (e) {
        res.status(401).send({ error: 'Please authenticate.' })
    }
}

module.exports = auth

TRANSFERIP.JS（路由器）

const express = require('express')
const TransferIp = require('../models/transferip')
const auth = require('../middleware/auth')
const router = new express.Router()

router.post('/transferip', auth, async (req, res) => {
    const task = new TransferIp({
        ...req.body,
        owner: req.user._id
    })

    try {
        await task.save()
        res.status(201).send(task)
    } catch (e) {
        res.status(400).send(e)
    }
})
router.get('/transferip', auth, function(req, res, next) {
    TransferIp.find(function (err, events) {
      if (err) return next(err);
      res.json(events);
    });
});

module.exports = router

使用邮递员成功获取令牌请求的屏幕截图

Answer 1

像这样尝试：

使用HttpClient

import { Injectable } from "@angular/core";
import { HttpClient,HttpHeaders  } from '@angular/common/http';

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {}

  getTransferIp() {
    let header = new HttpHeaders().set(
      "Authorization",
       localStorage.getItem("token")
    );

    return this.http.get("http://localhost:3003/transferip", {headers:header});
  }
}