如何在 api 调用中以角度传递授权标头令牌

Question

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

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

}

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

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

AUTH.JS

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

使用 POSTMAN 使用令牌成功获取请求的屏幕截图

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

Answer 2

您可以创建一个拦截器来为每个请求添加Authorization 标头。

https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

如果您只想为这个特定请求添加标头，暂时可以使用类似的东西。

getTransferIp(){ {
    const token = localStorage.getItem("token");
    const header = new Headers({ 'Authorization': `Bearer ${token}` });
    const options = {
       headers: header,
    };

    return this.http.get('http://localhost:3003/transferip', options);   
}

Answer 3

要在 Angular 中拦截 http 请求，您可以编写一个服务，从 common/http 模块实现 HttpsInterceptor 接口。

 @Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'token...'; // your auth token
    if (authorized) { // your authorized  logic
      request = request.clone({
        setHeaders: {
          Authorization: `${token}`
        }
      });
    }

    return next.handle(request);
  }
}

别忘了在你的 module.ts 文件中提供你的服务

{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor},