Adjust website content depending on user's authentication status

Question

Adjust website content depending on user's authentication status

My goal is to display a logout button when the user is logged in and a login button if they are not. I am using JSON tokens to determine if a user is logged in or not, by checking if the token is null. However, this approach does not seem to be working. Can anyone provide assistance?

home.page.ts

admin = false;

  constructor(private userService: UserService, private storage: Storage, private router: Router) {}


  ngOnInit() {
    this.router.navigateByUrl('home');
    if (this.storage.get('token') != null) {
        this.admin = true;
    } 
  }

home.page.html

 <ion-button *ngIf="admin==true">Logout</ion-button>
 <ion-button *ngIf="admin==false">Login</ion-button>

javascript angular typescript ionic4

Answer 1

Answer №1

To update your code, make the following modifications:

  isAdmin = false;

  constructor(private userService: UserService, private storage: Storage, private router: Router) {}


  async ngOnInit() {
    this.router.navigateByUrl('dashboard');
    let token = await this.storage.get('token');
    if (!token) {
        this.isAdmin = false; //User is not authenticated
    } 
    else{
        this.isAdmin = true; //User is authenticated as admin
    }
  }

Answer 2

To update your code, make the following modifications:

  isAdmin = false;

  constructor(private userService: UserService, private storage: Storage, private router: Router) {}


  async ngOnInit() {
    this.router.navigateByUrl('dashboard');
    let token = await this.storage.get('token');
    if (!token) {
        this.isAdmin = false; //User is not authenticated
    } 
    else{
        this.isAdmin = true; //User is authenticated as admin
    }
  }

Adjust website content depending on user's authentication status

Answer №1

Similar questions

AngularJS: Solving the issue of controllers not exchanging data by utilizing a service

Angular2 application experiences exception in the karma test for checking karma

What strategies can be used to ensure that the page layout adjusts seamlessly to even the smallest shifts in window size?

Commit the incorrect file name with the first letter capitalized

Dynamic options can now be accessed and modified using newly computed getters and setters

JavaScript: create a collision detection algorithm to find pairs of objects in an object, not an array

Display the notification list by utilizing the "ToastController" function

What could be the reason for the variable not resetting in my event handler?

Learn how to effectively transfer data from $.getjson to PHP, specifically through the use of Laravel's @foreach loop

chart for visualizing two rows with matching IDs and dates

I'm looking for the location of Angular Materials' CSS directives. Where can I find them?

The positioning of the Material Ui popover is incorrect

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

Transform an array of strings into an array of object IDs

Inadequate execution of a Faux Router

Utilizing NodeJS to initiate an http request and interact with a hyperlink

Receiving feedback from an http.post request and transferring it to the component.ts file in an Angular

How can I determine the size of the custom options dropdown in Magento?

Tips for executing a function in the HC-Sticky plugin?

Divide the identical elements and distinct elements from a provided array into two separate arrays storing unique elements and recurring elements