The improved approach to implementing guards in Angular

I am currently looking for the most effective way to utilize Angular "guards" to determine if a user is logged in. Currently, I am checking if the token is stored. However, I am wondering if it would be better to create an endpoint in my API that can verify if the user is authenticated.

Here is the code snippet:

canActivate(): Promise<boolean> {
  return new Promise(resolve => {
    this.storageService
      .get(AuthConstants.AUTH)
      .then(res => {
        if (res) {
          resolve(true);
        } else {
          this.router.navigate(['login']);
          resolve(false);
        }
      })
      .catch(err => {
        resolve(false);
      });
  });
}
angulartypescriptionic-frameworkfrontend

Answer №1

This method appears to be quite unconventional. In order to enhance readability, your current code could be modified as follows:

canActivate(): Observable<boolean | UrlTree> {
  return from(this.storageService.get(AuthConstants.Auth)).pipe(
    tap((res) => res || throwError()),
    catchError(() => this.router.createUrlTree(['login']))
  );
}

With this modification, the angular guard handler now manages the redirection. Instead of invoking 

this.storageService.get(AuthConstants.Auth)
, you have the flexibility to call any API. Simply ensure that the returned value is an Observable that completes successfully (or a Promise, which always completes).

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

Obtaining status codes from URLs can be achieved by leveraging various methods

Hey there, I'm just starting out with javascript and AngularJS. Here's a function I wrote to retrieve JSON data from the server: function getProducts() { return $http.get(urlProducts).then( //Success function(resp ...

javascriptangularjsjsoncordovaionic-framework

`Angular 6 and the expiration of Jwt tokens`

I am currently developing an angular application that utilizes jwt for authenticating database calls. However, I encountered a problem where, when the token expires on the server, the app starts displaying blank pages instead of the expected data. This hap ...

angulartypescriptauthenticationjwt

Trouble Getting formGroup to Function Properly with Radio Button in Angular 2

Is there a way to pass the rating value from my template to my component without using parameter passing in a method? Currently, I am passing it as a parameter in the following manner: <form [formGroup]="ratingForm"> <div *ngFor=" ...

angular

"Using Angular and TypeScript to dynamically show or hide tabs based on the selected language on a website

When switching the language on the website, I want to display or hide a specific tab. If the language is set to German, then show the tab; if any other language is selected, hide it. Here's my code: ngOnInit(): void { this.translate.onLangChange.s ...

javascriptangulartypescript

Creating a dynamic form in Angular using reactive forms and form builder that pulls real-time data from the server

I have been struggling for the past two days to organize the data in the correct order but so far, I haven't been successful. Essentially, I retrieve some data from the server and present it to the client along with additional fields that the client n ...

angular

Best practices for managing several models within the Ionic framework using PouchDB?

Hey there! I've been diving into PouchDB lately and have a question about handling multiple models. I've noticed that most examples focus on a single model, like the ones found in this tutorial and various to-do app demos where they use db.allDo ...

angularjsionic-frameworkdata-modelingpouchdb

Substitute the specific class title with the present class

Here is a sample class (supposed to be immutable): class A { normalMethod1(): A{ const instance = this.staticMethod1(); return instance; } static staticMethod1: A(){ return new this(); } } The code above works fine, but how can I re ...

javascripttypescriptclass

What is the best method to obtain access to the controls of an item within FormArray?

My goal is to assign an invalid class to the parent div of each input based on its validity status. In the form, I can control the input fields like this: <div class="form-group focus" [ngClass]="!recipeForm.controls.name.valid ? ...

angularangular-formsformarray

What is the best way to reduce the size of TypeScript source code in an Electron application with the help of Electron Forge and Electron Packager

resolved: I was able to solve this issue using electron-builder, which utilizes webpack in the background to handle all problems efficiently. Initially, I faced this challenge while using electron-forge and electron-packager. Despite researching extensivel ...

typescriptelectronelectron-packagerelectron-forge

What method is the easiest for incorporating vue.js typings into a preexisting TypeScript file?

I currently have a functional ASP.NET website where I'm utilizing Typescript and everything is running smoothly. If I decide to incorporate jQuery, all it takes is running npm install @types/jQuery, and suddenly I have access to jQuery in my .ts file ...

typescriptvue.js

Using references to pass variables in TypeScript [Angular 8]

I have several variables within the html of this component that are assigned their values by the typescript file. The declaration in the html is as follows: <h1>{{myproperty1}}<\h1> <h1>{{myproperty2}}<\h1> <h1>{{myp ...

javascriptangulartypescript

One effective way to transfer state to a child component using function-based React

My goal is to pass an uploaded file to a child component in React. Both the parent and child components are function-based and utilize TypeScript and Material-UI. In the Parent component: import React from 'react'; import Child from './ ...

javascriptreactjstypescriptmaterial-ui

Incorporating interactive buttons within Leaflet popups

I'm facing an issue with adding buttons to a Leaflet popup that appears when clicking on the map. My goal is to have the popup display 2 buttons: Start from Here Go to this Location The desired outcome looks like this sketch: ___________________ ...

javascriptangulartypescriptleaflet

What steps can I take to fix the ESM / require error while using TypeScript 4.8?

My Node.js application uses TS 4.8, and I recently updated the file-type package. However, after the update, my project compilation fails with the following error: [1] const _fileType = /#PURE/ _interopRequireWildcard(require("file-type")); [1] ...

node.jstypescriptfile-typeswc

Is there a way to imitate a method that initiates an AJAX request?

I am currently working on writing tests for my Angular application and I need to mock a method in order to avoid making actual requests to the server. Within my grid.service.ts file, here is the method I am trying to mock: loadAccountListPromise(id: str ...

javascriptajaxangularunit-testingkarma-jasmine

Developing a MEAN-based calendar application that is constantly monitoring for updates

I am considering developing a calendar web app to enhance my web development skills. After carefully planning the structure and technologies, I have decided to use the MEAN stack. However, I have encountered a challenge: I want the angular front-end to a ...

node.jsangularmongodb

What is the best approach for utilizing Inheritance in Models within Angular2 with TypeScript?

Hey there, I am currently dealing with a Model Class Question and a ModelClass TrueFalseQuestion. Here are the fields: question.model.ts export class Question { answerId: number; questionTitle: string; questionDescription: string; } truefals ...

angulartypescript

Trigger Angular2 EventEmitter in child component to inform parent component

I am having trouble triggering an event from the child component to the parent component. @Component({ template:'<foo></foo>' }) export class ParentComponent{ onDoSomething($event){ //handling logic goes here } } @Compo ...

angulartypescript

Issue with Typescript and React: Property not found on type 'IntrinsicAttributes'

While working on my app using Meteor, React, and Typescript, I encountered a transpiling error: The property 'gameId' is not recognized in the type 'IntrinsicAttributes & {} & { children?: ReactNode; } In my project, I have a com ...

reactjsmeteortypescript

Unable to transfer data through Ionic popover

I've encountered an issue when trying to pass data to my popover component, as the data doesn't seem to be sent successfully. Code HTML <div class="message" id="conversation" *ngFor="let message of messages.notes"> <ion-row class= ...

javascriptangulartypescriptionic-framework