J'utilise un appel get api pour récupérer les données de json doc en utilisant http. Mais j'ai activé l'autorisation uniquement pour le porteur de jeton. Je veux passer la valeur du jeton (que je peux obtenir via localStorage.getItem ("token"); ) dans mon autorisation dans les en-têtes lorsque j'appelle la demande get.
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
Actuellement, je suis autorisé à récupérer les données uniquement lorsque je désactive l'authentification dans mon serveur de nœud routeur ... Mais je ne veux pas faire cela et aussi sans utiliser l'intercepteur
Attatching Node Server Files below ...
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 (ROUTEUR)
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() );
}
}
CAPTURE D'ÉCRAN DE RÉUSSITE OBTENIR UNE DEMANDE AVEC TOKEN À L'AIDE DE POSTMAN
3 Réponses :
Pour intercepter les requêtes http de manière angulaire, vous pouvez écrire un service qui implémente l'interface HttpsInterceptor à partir du module common / http .
{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor},
N'oubliez pas de fournir votre service dans votre fichier module.ts
@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);
}
}
Essayez comme ceci:
Utilisez 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});
}
}
Pourquoi utilisez-vous map, quelle version d'Angular utilisez-vous
Im using 8.2 btw obtenir cette erreur en essayant votre réponse `` L'argument de type 'HttpHeaders' n'est pas assignable au paramètre de type 'RequestOptionsArgs'. La propriété 'headers' est privée de type 'HttpHeaders' mais pas de type 'RequestOptionsArgs' `` ``
Utilisez httpclient, constructeur (http privé: HttpClient) {}
Pouvez-vous essayer le dernier?
a essayé. pas de chance :( btw je n'obtiens pas la 2ème erreur de commentaire. mais je ne peux pas récupérer les données car je reçois 401: non autorisé
De quel type d'autorisation dispose votre backend? Btoa? Porteur? Essayez-le en utilisant Postman et montrez comment cela fonctionnait
J'ai ajouté plus de détails dans la question. Vérifiez s'il vous plaît
Dans l'en-tête d'autorisation, avant la valeur, vous n'avez pas ajouté «Bearer» ou autre chose?
Vérifiez la réponse modifiée. Supprimer "Bearer" +
essayé mais toujours noo .... GET http: // localhost: 3003 / transferip 401 (non autorisé)
Eh bien, aucune idée alors, c'est ainsi que cela se fait. Vous pouvez vérifier localStorage.getItem ("token") si cela est correct
Vous pouvez créer un intercepteur pour ajouter l'en-tête Authorization pour chaque requête.
Si vous souhaitez ajouter l'en-tête pour cette requête spécifique uniquement, temporairement, vous pouvez utiliser quelque chose comme ceci.
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);
}
dans l'onglet réseau de votre navigateur, la demande contient-elle l'en-tête d'autorisation?
Oui. et fyi quand je reçois la demande via le facteur ajoutant le jeton, cela fonctionne
Est-ce un problème de cors? Y a-t-il une demande d'options avant la demande d'API qui échoue? Dans la console du navigateur, y a-t-il une erreur Cross Origin?
@JasonWhite Oui, j'ai un problème similaire et j'obtiens une erreur CORS, même si j'ai la gestion CORS sur le backend, pouvez-vous m'aider ici? J'ai également un problème légèrement différent depuis que j'utilise angular 9.
@Petar Si vous rencontrez un problème CORS, il y a probablement un problème avec la configuration de votre backend. Les demandes CORS sont envoyées / gérées par le navigateur et non par Angular, de sorte que le problème n'est probablement pas lié à Angular. Sans voir de code source, il est difficile de dire le problème.
Vous pouvez utiliser un intercepteur. medium.com/@ryanchenkie_40935/ …