Upon inspecting the Network tab, I noticed that one of the users is highlighted in red indicating an error. The console also displays an error 401, indicating unauthorized access. Below is the code snippet from the memberService.ts and member-list-component.ts files. Interestingly, there are no compilation errors.
memberService.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Member } from '../_models/member';
const htttpOptions ={
headers: new HttpHeaders({
Authorization: 'Bearer'+JSON.parse(localStorage.getItem('user')).token
})
}
@Injectable({
providedIn: 'root'
})
export class MembersService {
baseUrl = environment.apiUrl;
constructor(private http: HttpClient) { }
getMembers()
{
return this.http.get<Member[]>(this.baseUrl+ 'users', htttpOptions);
}
getMember(username :string){
return this.http.get<Member>(this.baseUrl + 'users/' + username, htttpOptions);
}
}
member-list-component.ts
import { MembersService } from './../../_services/members.service';
import { Component, OnInit } from '@angular/core';
import { Member } from 'src/app/_models/member';
@Component({
selector: 'app-member-list',
templateUrl: './member-list.component.html',
styleUrls: ['./member-list.component.css']
})
export class MemberListComponent implements OnInit {
members: Member[];
constructor(private MemberService: MembersService) { }
ngOnInit(): void {
this.loadMembers();
}
loadMembers()
{
this.MemberService.getMembers().subscribe(members=>{
this.members = members;
})
}
}
Although Postman successfully returns a list of users, indicating that the API is functioning correctly, my client-side application seems to encounter authorization issues. This discrepancy is puzzling and requires further investigation.
For more details, refer to the screenshots below:
Console Tab: Console Tab Screenshot
Network Tab Information 1.0: Network Tab Information 1.0 Screenshot
Network Tab Information 2.0: Network Tab Information 2.0 Screenshot
Postman Results: Postman Results Screenshot