"An issue of type TypeError occurred: When logging out of the application, it appears that 'x is null

Question

"An issue of type TypeError occurred: When logging out of the application, it appears that 'x is null

Currently in my app, I am working on implementing authentication following the guidance provided in this example: Click here for more information. However, I have encountered an error that reads "ERROR TypeError: 'x is null'" when trying to execute the logout function. Can anyone offer insight into what might be causing this issue and suggest potential solutions? Your guidance would be greatly appreciated.

One specific challenge I am facing is utilizing the isCurrentUserAdmin method across multiple components to determine whether the user has admin privileges or not.

Here is a snippet from the authenticationService.ts file:

private userSubject: BehaviorSubject<User>;
public user: Observable<User>;

 isCurrentUserAdmin(): boolean {
    this.user.subscribe(x => this.currentUserRole = x.role);
    return this.user && this.currentUserRole === Role.admin;
  }


  logout() {
    // Remove user from local storage to log them out
    this.deleteToken();
    this.userSubject.next(null);
    this.router.navigate(['/login']);
  }

angular typescript authentication

Answer 1

Answer №1

checkIfUserIsAdmin(): boolean {
    this.user.subscribe(data => this.currentUserRole = data ? data.role : null);
    return this.user && this.currentUserRole === Role.admin;
}

Once the user logs out, their data becomes null
which means that accessing data.role will result in an error.

In addition, following @Gunnar B.'s suggestion to filter it may not be ideal
as the currentUserRole needs to be updated with the latest User information.
Otherwise, after logging out, the previous User's role will still persist.

Answer 2

checkIfUserIsAdmin(): boolean {
    this.user.subscribe(data => this.currentUserRole = data ? data.role : null);
    return this.user && this.currentUserRole === Role.admin;
}

Once the user logs out, their data becomes null
which means that accessing data.role will result in an error.

In addition, following @Gunnar B.'s suggestion to filter it may not be ideal
as the currentUserRole needs to be updated with the latest User information.
Otherwise, after logging out, the previous User's role will still persist.

Answer 3

Answer №2

A null is sent to the userSubject (which the user will receive as well). When trying to access a property of user in the isCurrentUserAdmin function, it results in an error because at that point user === null and no longer has the property (role).

To solve this issue, filtering out null-users is necessary (and it is advisable not to subscribe within that function to avoid creating multiple subscriptions every time the function is called).

this.user.pipe(filter(x => x !== null)).subscribe(x => this.currentUserRole = x.role);

It is important to place the subscription in a location where it is only executed once. Also, remember to unsubscribe when the component is destroyed. Although in this case, since the observable is within the same component and would be destroyed accordingly (I believe), unsubscribing may not be necessary but it is a good practice.

Edit:
In reality, you should consider unsubscribing when the user is set to null because technically there could still be a role even if the user is null. (This is prevented in the return with this.user, but it is somewhat flawed logic.)
If you subscribe when a user is set and unsubscribe when it is cleared, then the filter may not be needed.

Edit2:
Regarding performance concerns (depending on the frequency of function calls), you can also directly extract the role from the user observable:

return this.user.pipe(take(1)).subscribe(x => x ? x.role : null);

Answer 4

A null is sent to the userSubject (which the user will receive as well). When trying to access a property of user in the isCurrentUserAdmin function, it results in an error because at that point user === null and no longer has the property (role).

To solve this issue, filtering out null-users is necessary (and it is advisable not to subscribe within that function to avoid creating multiple subscriptions every time the function is called).

this.user.pipe(filter(x => x !== null)).subscribe(x => this.currentUserRole = x.role);

It is important to place the subscription in a location where it is only executed once. Also, remember to unsubscribe when the component is destroyed. Although in this case, since the observable is within the same component and would be destroyed accordingly (I believe), unsubscribing may not be necessary but it is a good practice.

Edit:
In reality, you should consider unsubscribing when the user is set to null because technically there could still be a role even if the user is null. (This is prevented in the return with this.user, but it is somewhat flawed logic.)
If you subscribe when a user is set and unsubscribe when it is cleared, then the filter may not be needed.

Edit2:
Regarding performance concerns (depending on the frequency of function calls), you can also directly extract the role from the user observable:

return this.user.pipe(take(1)).subscribe(x => x ? x.role : null);

"An issue of type TypeError occurred: When logging out of the application, it appears that 'x is null

Answer №1

Answer №2

Similar questions

Encountering an issue with React Redux and Typescript involving the AnyAction error while working on implementing

Creating a nrwl/nx workspace with Angular Universal and encountering a typing problem in Cypress configuration

Working with Angular forms: Adding an element to a specific index in a

AngularJS 2: Updating variable in parent component using Router

Is it possible to change the value of a react-final-form Field component using the onSelect function?

Troubleshooting Ionic 4 IonSlides slideTo and getActiveIndex functionalities encountering issues within IonTab context

Encountered an issue with Angular while trying to import scss variables: Module parse failed due to an unexpected token at

Tips for sending a timestamp as input to a stored procedure in TypeScript with the mssql module

When logging off from an Angular2 application, the OIDC-client does not properly clear the cookies for the MVC application

Guidelines on launching an ionic 4 modal using routes

Tips for maintaining the selection when switching pages with smart-table?

In order to emphasize the chosen list item following a component refresh

The Angular-Slickgrid filter doesn't seem to be functioning properly. However, when the entire text is entered

Encountering a Typescript issue when linking a class component with the reducer

A guide on leveraging Jest and Typescript to mock a static field within a class

I require the ability to modify cellEditor parameters in real-time

Is there a way to remove the sign up link from the AWS Amplify Vue authenticator?

The click event was not captured by the Angular innerhtml element

The error property is not found in the type AxiosResponse<any, any> or { error: AxiosError<unknown, any>; }

Exploring the potential of utilizing arguments within the RxJS/map operator