it-swarm.com.de

Berechtigungsträger Token Winkel 5

Ich bin verwirrt darüber, wie man einen guten Header für eine einfache Get-Anfrage in Angular 5 erstellt. 

In Angular muss ich Folgendes tun:  enter image description here

Das habe ich bisher: 

  getUserList(): Observable<UserList[]> {
    const headers = new Headers();
    let tokenParse = JSON.parse(this.token)             
    headers.append('Authorization', `Bearer ${tokenParse}`);
    const opts = new RequestOptions({ headers: headers });  
    console.log(JSON.stringify(opts));
    const users = this.http.get<UserList[]>(this.mainUrl, opts)
    return users
            .catch(this.handleError.handleError);         
  }

Dies ist die Antwort in meinem console.log: 

{"method":null,"headers":{"Authorization":["Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug-Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw"]},"body":null,"url":null,"withCredentials":null,"responseType":null}

Es sieht hübsch aus. Aber gibt mir diesen Fehler

GET http: //druang.dd: 8080/Benutzerliste? _Format = json 403 (Verboten)

Es gibt einen weiteren Hinweis, um dieses Rätsel zu lösen. Wenn ich den Mauszeiger über opts stecke, heißt es in Sublime Text: 

ERROR in src/app/services/userlist.service.ts (33,59): Fehler TS2345: Das Argument des Typs 'RequestOptions' kann dem Parameter von .__ nicht zugewiesen werden. Typ '{Kopfzeilen?: HttpHeaders | {[header: string]: string | Zeichenfolge []; }; beobachten ?: "Körper"; Params ?: Ht ... '. Typen von Eigenschafts-Headern sind inkompatibel . Der Typ 'Header' kann nicht dem Typ 'HttpHeaders | zugewiesen werden {[header: string]: string | Zeichenfolge []; } '. Der Typ 'Header' kann nicht dem Typ '{[header: string]: string | zugeordnet werden Zeichenfolge []; } '. Die Indexsignatur fehlt beim Typ 'Header'.

Irgendwelche Idee? Hier ist das vollständige Git Repo Danke für Ihre Hilfe!

7
ValRob

Ich würde vorschlagen, dass Sie einen HTTPInteceptor verwenden, der sich um das Hinzufügen des Tokens kümmern würde. Hier ist ein großartiger Artikel, um dies zu erreichen: https://www.illucit.com/angular/en-angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/

----- Eine andere Möglichkeit, das Problem zu lösen. -----

import { Http, Headers, Response } from '@angular/http';

getLoggedInUser(auth_token): Observable<any> { const headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': auth_token }) return this.http.get(apiUrl, { headers: headers }) }

Vergessen Sie nicht, in Ihrer Komponente anzurufen und zu abonnieren.

7
Nagy Gergő

Zwei Dinge:

  1. headers.append(...) mutiert das Header-Objekt nicht, daher wird der Autorisierungs-Header nicht gesendet. Sie müssen headers = headers.append(...) tun 

  2. this.http.get<UserList[]>(this.mainUrl, { headers: headers }); ausprobieren

4
GreyBeardedGeek

In Angular 6 und 7 kann diese Methode verwendet werden, um alle HTTP-Anforderungen abzufangen und das Bearer-Token hinzuzufügen.

Das Implementierungs-Tutorial finden Sie hier. Youtube , dieser Kanal enthält alle Tutorials.

Interceptor-Komponente

import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpUserEvent,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { UserService } from '../shared/user.service';
import { tap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private router: Router) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.headers.get('No-Auth') === 'True') {
      return next.handle(req.clone());
    }

    if (localStorage.getItem('userToken') != null) {
      const clonedreq = req.clone({
        headers: req.headers.set(
          'Authorization',
          'Bearer ' + localStorage.getItem('userToken')
        )
      });
      return next.handle(clonedreq).pipe(
        tap(
          succ => {},
          err => {
            if (err.status === 401) {
              // this.router.navigateByUrl('/login');
            } else if ((err.status = 403)) {
              // this.router.navigateByUrl('/forbidden');
              // alert(err.localStorage.getItem('userToken'));
            }
          }
        )
      );
    } else {
      this.router.navigateByUrl('/login');
    }
  }
}

Schutzkomponente

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from '../shared/user.service';
import { ToastrService } from 'ngx-toastr';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router,
    private userService: UserService,
    private toastr: ToastrService
  ) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    if (localStorage.getItem('userToken') != null) {
      const roles = next.data['roles'] as Array<string>;
      if (roles) {
        const match = this.userService.roleMatch(roles);
        if (match) {
          return true;
        } else {
          // tslint:disable-next-line: quotemark
          this.toastr.info("You don't have access to this page");
          this.router.navigate(['/login']);
          // this.router.navigate(['/forbidden']);
          return false;
        }
      } else {
        return true;
      }
    }
    this.router.navigate(['/login']);
    return false;
  }
}

Fügen Sie es zu app.modules.ts hinzu

providers: [
    ConfirmationDialogService,
    UserService,
    DoctorService,
    { provide: OwlDateTimeIntl, useClass: DefaultIntl },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
    AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],

Dann wird die Wache zur Route hinzugefügt

 {
    path: 'adminPanel',
    component: AdminPanelComponent,
    canActivate: [AuthGuard],
    data: { roles: ['Admin'] }
  },
3
Arun Prasad E S

Ich habe den folgenden Code verwendet und es funktioniert

importiere {HttpClient, HttpHeaders} von '@ angle/common/http';

getServerList(){
    var reqHeader = new HttpHeaders({ 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('mpManagerToken'))
     });
    return this.http.get<Server[]>(`${environment.apiUrl}/api/Servers/GetServerList`, { headers: reqHeader });
}
2
Hassan Rahman

Ich bin nicht sehr gut in der Programmierung, aber mit ein wenig Versuch und Scheitern. 

  getUserList(): Observable<UserList[]> {
    let tokenParse = JSON.parse(this.token)    
    // let myHeaders = new Headers();
    // myHeaders.set('Authorization', `Bearer ${tokenParse}`);
    // let options = new RequestOptions({ headers: myHeaders});
    const users = this.http.get<UserList[]>(this.mainUrl, { headers:new HttpHeaders().append('Authorization', `Bearer ${tokenParse}`)})
    // const users = this.http.get<UserList[]>(this.mainUrl, options);
    return users
            .catch(this.handleError.handleError);         
  }

Es ist nicht wirklich wichtig, ob ich .set oder .append verwende. Am Ende des Tages funktioniert es in beiden Fällen ... 

Ich weiß nicht wirklich was passiert, also wenn jemand es in den Kommentaren erklären möchte, sind Sie herzlich willkommen ... 

0
ValRob
'Authorization': 'Bearer ' + access_token,

das hat funktioniert

0
masaldana2