Unable to get the value from BehaviorSubject in angular on interceptor refer the below

common.service.ts

Login service has been created.

export class CommonService {

public tokenSubject: BehaviorSubject<UserToken>;
public token: Observable<UserToken>;
constructor(private httpclient: HttpClient,
private router: Router
) {
this.tokenSubject = new BehaviorSubject<UserToken>(JSON.parse(localStorage.getItem('access_token') as string));
this.token = this.tokenSubject.asObservable();
}

private commonApi = `${Appsettings._ApiEndpoint}`;

login(data: any): Observable<any> {
return this.httpclient.post<UserToken>(`${this.commonApi}api/user/user-login`, {loginData: data})
.pipe(
map(token => {
const userToken: UserToken = token;

localStorage.setItem('access_token' , JSON.stringify(userToken));
this.tokenSubject.next(userToken);

return userToken;
})
);
}
}

public get tokenValue(): UserToken {
return this.tokenSubject.value;
}


user.ts

export class UserToken {
token: string;
}


login.component.ts

Login service being called, passed with requested data.

constructor(private commonservice: CommonService,
private router: Router
) { }


login(formData:NgForm, isValid: any) {
if(isValid) {
this.commonservice.login(formData.value)
.subscribe((data: any) => {
console.log('login data : ' , data);
this.router.navigateByUrl('/dashboard');
}, error => {
console.log('error : ' , error);
alert(error.error.message);
})
}

}


We are getting null in tokenObj and isLoggedIn console.log(). What is wrong here? And also please help to better and deep understanding how to get the value from BehaviorSubject RxJs in angular. How will we get the data from BehaviorSubject?

request.interceptor.ts

We are unable to get the token value on interceptor.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<any>> {

this.spinner.show();

const tokenObj = this.commonService.tokenValue;
console.log('tokenObj : ' , tokenObj);
const isLoggedIn = tokenObj && tokenObj.token;
console.log('isLoggedIn : ' , isLoggedIn);
if(isLoggedIn) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${tokenObj.token}`
}
})
}
return next.handle(request).pipe(
tap(
event => {
if(event instanceof HttpResponse) {
console.log('success in calling API : ', event);
this.spinner.hide();
}
},
error => {
console.log('error in calling API : ', error);
this.spinner.hide();
}
)
);
}




Continue reading...