Question

我正在使用get api调用来使用http从json文档中获取数据。但是我已启用仅令牌持有者的授权。我想在调用get请求时在标头中的授权中传递令牌的值（我可以通过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() ); } }获得令牌的值）。

API.SERVICE.TS

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

当前，仅当我关闭节点服务器get路由器中的auth时，才允许获取数据... 但是我不想这样做，而且也不需要使用拦截器

在下面捕获节点服务器文件...

AUTH.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

TRANSFERIP.JS（ROUTER）

{{1}}

使用邮递员成功获得令牌令牌的屏幕快照

Answer 1

您可以创建一个拦截器，为每个请求添加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 2

要以角度拦截HTTP请求，可以编写一个服务，该服务从HttpsInterceptor模块实现common/http接口。

 @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},

Answer 3

尝试这样：

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

如何在Angular的api调用中传递授权标头令牌

3 个答案: