The Observable<boolean> feature is not functioning as intended

I'm currently facing an issue while trying to implement a guard using the userService to retrieve necessary information. The implementation of the UserService is as follows:

  getUserDetails(): Observable<User> {
    this.requestUrl = `${configs.bgwssApi}v1/user/details`;
    return this.http.get<User>(this.requestUrl).pipe(catchError(this.handleError));
  }

  isBoardMember(): Observable<boolean> {
    this.getUserDetails().pipe(
      map(data => {
        if (data.userRole !== 'MEMBER') {
          return of(false);
        }
        console.log(data); //Not printed
      })
  );
    return of(true);
  }

While the getUserDetails function works correctly by returning the required information, the issue arises with the isBoardMember function always returning true without even checking the userRole. What could possibly be causing this problem? How can I resolve the isBoardMember method so that it returns the accurate value? This is crucial because my guard conducts a verification like the one shown below, which is functioning properly:

canActivate(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<boolean> {
return this.userService.isBoardMember().pipe(
  map(data => {
    if (data === false) {
      this.router.navigate(['main']);
      return false;
    }
    return true;
  })
);

}

Answer №1

It is crucial to ensure that you are returning the observable.

checkMembershipStatus(): Observable<boolean> {
    return this.fetchUserDetails().pipe(map(response => {
        return !(response.role !== 'MEMBER');
    }));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the functionality of ngTemplateOutlet, the implementation of @ContentChild, and the benefits of using ng

Lately, I've been dedicating more time to grasp the concepts presented in the blog post titled Creating Reusable Components with NgTemplateOutlet in Angular If you want to see the code in action, it's available on stackblitz. Within the UsageEx ...

Using `location.reload()` and `location.replace(url)` does not seem to function properly when using Electron with Angular

Using Electron to rebuild a pre-existing web app, the main.js file in electron is kept simple: // Modules to control application life and create native browser window const {app, BrowserWindow} = require('electron') // Keep a global reference o ...

Issues with loading SourceMap in DevTools after upgrading from Bootstrap 3 to 4

I am currently working on a project with Angular 6 and .NET MVC where I am in the process of upgrading from Bootstrap 3 to Bootstrap 4. Initially, I had been using the Bootstrap 3 CDN and everything was working smoothly. However, I recently had to switch t ...

Creating a modal dialog using a function in a TypeScript file

Hey there, fellow developers! I have a question that might seem simple. So, in my HTML code I've got a Modal Dialog that pops up using ng2 Bootstrap. It's working fine, but... I want to replace this line of code "<button class="btn btn-prim ...

Whenever I attempt to render a component passed as a prop, I encounter error TS2604

I am attempting to pass a component as a prop to another component in order to wrap the content of a material ui modal This is my attempt so far: import React, { Component } from 'react'; import withWidth, { isWidthDown } from '@material-u ...

Creating a button that displays the current day with Angular

I'm in the process of developing a timetable app that features buttons for the previous day, current day, and next day. How can I implement a button to specifically show the current day? HTML File <button type="button" (click)="previousDay()" ...

Order of Execution

I am facing an issue with the order of execution while trying to retrieve values from my WebApi for input validation. It appears that the asynchronous nature of the get operation is causing this discrepancy in execution order. I believe the asynchronous b ...

How can I execute a TypeScript / TSX file from a Next.js project in the terminal using ts-node?

One of my go-to tools is ts-node for running individual files. I'm currently attempting to execute files like ts-node ./page/home.tsx, but I'm encountering issues within my Next.js project. export const WidgetList = createWidget<ButtonListPro ...

When intercepted, the HttpRequest is being canceled

Solution Needed for Request Cancellation Issue Encountering a problem with the usage of HttpInterceptor to include the Authorize header in all HTTP requests sent to AWS API Gateway. The issue arises as all these requests are getting cancelled when interce ...

Form control identifier and input field name

I am currently developing a custom input feature for my application. One of the functionalities I want to include is auto-completion, and in my research, I found out that certain conditions need to be met for it to work: In order to enable auto-completi ...

What is the best way to update a child component when a function is triggered by another child component?

In my questions-manager.component.html component, the structure looks like this: <div> <main> <div> <questions-component [title]="'title'" [id]="id" (changeStatus)="statusChang ...

How can I use Angular 7 to create a background image for a View made up of multiple components?

Here is the HTML code that I am working with: <app-navbar></app-navbar> <router-outlet></router-outlet> My goal is to have an image set as the background for the home view, which consists of two components: navbarComponent and hom ...

When using an Angular client to send a request with an access token to Azure AD WebAPI, the response may still show

I have been facing an issue with my Angular client while trying to authenticate and receive a token from Azure AD. Despite adding the token to the header and calling the WebAPI, I keep encountering the message: "Authorization has been denied for this requ ...

Issues with the messaging functionality of socket.io

Utilizing socket.io and socket.io-client, I have set up a chat system for users and operators. The connections are established successfully, but I am encountering strange behavior when it comes to sending messages. For instance, when I send a message from ...

Strange behavior observed when redirecting in an Angular component inside an async function block

My app is receiving FCM messaging notifications successfully, but I'm facing an issue when trying to trigger a router navigation. Specifically, I want to display a page that mimics the standard Android incoming call screen when a call notification is ...

Replace the ngOnDestroy method

Is there a way to complete an observable when the ngOnDestroy is triggered? I'd prefer not to create new child components when dealing with just one component instance. I attempted to override ngOnDestroy by modifying the function in the component&apo ...

Differences between Angular MSAL Library's acquireTokenRedirect and acquireTokenPopup functions resulting in errors

Currently, I am utilizing the msal angular library to handle logins and backend API communication in order to obtain tokens and access a dashboard. While trying to implement the option of using redirect instead of popup for signing in or obtaining a token, ...

Tips for splitting JSON objects into individual arrays in React

I'm currently tackling a project that requires me to extract 2 JSON objects into separate arrays for use within the application. I want this process to be dynamic, as there may be varying numbers of objects inside the JSON array in the future - potent ...

Utilizing Angular: Importing Scripts in index.html and Implementing Them in Components

Currently, I am attempting to integrate the Spotify SDK into an Angular application. While I have successfully imported the script from the CDN in index.html, I am encountering difficulties in utilizing it at the component level. It seems like there may be ...

TypeScript versions 2.3 and 2.4 experiencing issues with generic overloads

After upgrading from typescript 2.2, I encountered an issue with the following example. interface ILayoutResult { id: string; data: any; } interface ILayout{ getResult<T extends ILayoutResult | ILayoutResult[] | void>() :T; } class te ...