Authorization token ANGULAR NODEJS con Interceptor http

******* IMPORTANTE!!!! El httpinterceptor se dispara solo si se utiliza la clase HttpClient para invocar al servicio, si se utiliza Http, no se dispara!!! *******

Servidor

app.js

var express = require("express"),
    app = express(),
    bodyParser  = require("body-parser"),
    methodOverride = require("method-override");

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, x-access-token, Authorization');
    res.setHeader('Access-Control-Allow-Credentials', true); 

    if (req.header('Authorization') == undefined)
        return next();
     
    if (req.header('Authorization') == "Bearer #112222")
    {
        console.log("Autorizado");
        next();
    } else
    {
        console.log("NO autorizado");             
        res.sendStatus(401);
    }     
});

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());

var router = express.Router();

app.use(router);

router.get('/prueba', function(req, res) {
    var p = [{nombre: 'carlos', apellido: 'russo'},
             {nombre: 'karina', apellido: 'ortiz'}];

    res.send(p);
});

app.listen(8080, function() {
  console.log("Node server running on http://localhost:8080");
});


Cliente

app.component.html

<div style="text-align:center">
<h1>Prueba de authentication con token</h1>

<button (click)="metodo1()">Method 1</button>
</div>

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  title = 'app';
  constructor(private httpClient: HttpClient) { }

  metodo1(): void { 
      this.httpClient.get("http://localhost:8080/prueba").subscribe(
        success => {
          console.log("Ok!");
          console.log(success);
      }
    );
  }
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InterceptorHttp } from './interceptorhttp'
import { AppComponent } from './app.component';

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule
],
providers: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: InterceptorHttp,
  multi: true
}
],
bootstrap: [AppComponent]
})

export class AppModule { }


interceptorhttp.ts

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor} from "@angular/common/http";
import {HttpRequest} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
//import {Http, Headers, RequestOptions } from '@angular/http';

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

    intercept(req: HttpRequest<any>,
               next: HttpHandler):Observable<HttpEvent<any>> {
        console.log("interceptando!!!");

        const customHeaderRequest = req.clone({
            headers: req.headers.set('Authorization', 'Bearer #112222')
        });
     
        console.log(req);

       return next.handle(customHeaderRequest);
    }
}





No hay comentarios:

Publicar un comentario