Tips for Maintaining User Sessions in Ionic 4 Application

I am facing an issue with keeping users logged in to the app in Ionic 4. I have tried storing credentials like email and cross-checking the user using an API, then redirecting to the menu page. However, I am experiencing a brief moment on the login page before being directed to the menu page. How can I resolve this so that the menu page opens directly upon login?

app-routing.modules.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  // Route configurations here
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

service

 // HTTP GET request example
    // Service logic here

******************************************************************

async displayUsername() {
    // Display username logic here
  }

Additionally, the service redirects to the menu page after cross-checking user credentials.

// Additional service logic for redirection

Answer №1

*A solution dawned on me for this issue*

  • Upon opening the app with a logged-in user, the login page briefly appears

Therefore, I have decided to hide the login page content for logged-in users

login.html

<ion-content *ngIf='logged == true'>
  <img src="" alt="">
    <ion-row>
      <ion-col>
        <img src="assets/img/serviceho.png" alt="" srcset="">
      </ion-col>
    </ion-row>
</ion-content>   

Answer №2

Yes, the previous solution fits your specific scenario. However, in general, it is recommended to utilize the auth-guard and implement the canLoad() function in Angular. This function should be invoked within the ngOnInit() method of the app component.

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

Angular 2: Troubleshooting Issues with Observable Data Display

Looking to implement a RESTful call with Angular 2 that constantly updates whenever there are changes in the API. In my service, I've included an Observable to fetch data from the API: getData(): Observable<any[]> { return this.http.get(url) ...

What is the best way to verify both a null value and a length simultaneously within a template condition?

There is a data that can be null or an empty array, but the template should still be rendered if leaseApDto is not null or has a length greater than 0. I attempted to use the condition model.leaseApDto !== null || model.leaseApDto.length !=== 0, but they ...

Angular2 date input field unable to restrict minimum and maximum dates

Having trouble with dynamic min and max attributes not being recognized in ionic2 when using the 'datetime-local' type. <ion-input value="" type="datetime-local" [formControl]="expdate" [attr.min]="mindate" [attr.max]="maxdate"></ion-in ...

Having difficulty integrating requireJS and Node's Require in a single TypeScript project

I currently have a TypeScript project that is intended to work with both Node and the browser. In some scripts, I'm utilizing Node's require(), while in others requireJS's require(). The structure of my project directory is as follows: myPr ...

Utilize array mapping to alter the complete object

In my project using TypeScript (Angular 2), I am working on creating a "reset" method for an object array: cars [ { id: 1, color: white, brand: Ford, model: Mustang, ... }, ... ] Users have the ability to modify these objects, ...

Instructions on how to sign up for a worldwide technique that is known as

I have a file called globalvars.ts where I added a global method. How can I subscribe to this method in the ts page where it is being called? globalvars.ts; httpgetmethod(url:string) { var veri; var headers = new Headers(); headers.append(' ...

"Troubleshooting the absence of exception messages between Angular and .NET Core integration

Is there a way to retrieve a JSON array with a message in the console that says "Your direct manager has no account for your area"? Currently, I am only receiving the message "Http failure response for https://localhost:44385/api/Option/Post: 500 Internal ...

Angular 2: A ready-made solution for developing interactive discussion features

Currently working on my Angular 2 application and looking to incorporate a discussion feature. Are there any pre-existing solutions available for this integration? ...

Tips for accurately extracting values from a decoded JSON

Hello, I am posting this query because I recently encountered an issue with json encoding in PHP. When using the json_encode() function, my original JSON data gets converted to strings instead of maintaining its original variable type. For instance, let&a ...

Warning: The act of neglecting unhandled promise rejections is no longer accepted. Ionic 2 has introduced a new method for adding platforms

Encountered an error while trying to add a platform in Ionic 2 (node:5360) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error occurred either because an async function did not have a catch block to handle it, or because a promise ...

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Encountering a specific error, I am aware of what the code signifies but unsure about the correct interface format: An error is occurring due to an 'any' type being implicitly assigned as the index expression is not of type 'number'. ...

Upon attempting to run ionic for iOS, an error was encountered regarding the arm64 and armv7 architectures

I'm currently in the process of developing a mobile application for both Android and iOS platforms utilizing Ionic version 1. Here is a breakdown of the software versions I'm working with: cordova: 7.0.1 ionic: 2.2.2 ios-deploy: 1.9.2 ios-sim: ...

Capturing data in JSON format using ng-model for form values

I need help with a form element in my HTML. <form [formGroup]="myForm" (ngSubmit)="searchIncident()"> <select class="form-control" id="category" (change)="getSubCategories($event.target.value)" (ngModel)= ...

Unable to invoke an external function from bolt Response Handler Callback

I am facing an issue where I am unable to call my Update method from the bolt responseHandler. Can someone please help me with this problem? Using Angular 9: Error: core.js:1673 ERROR TypeError: this.updatePaymentInfo is not a function at Object.resp ...

Querying Firebase to find documents that do not have a specific requested field present in all

My current project is using firebase. I am currently working on retrieving documents from firebase, but I have encountered a specific issue. The problem lies in the fact that I have older documents without a "hidden" field and newer documents with this fie ...

The parameter in Angular cannot be assigned a type of 'null'

@Injectable({ providedIn: 'root' }) export class AuthenticationService { private currentUserSubject: BehaviorSubject<User>; public currentUser: Observable<User>; constructor(private http: HttpClient) { this.curren ...

What is the Reason for TypeScript's Inability to Verify the Type of Dynamic Key Object Fields?

How come TypeScript allows the declaration of seta even though it doesn't return objects of type A? type A = { a: '123', b: '456' } // Returns copy of obj with obj[k] = '933' function seta<K extends keyof A> ...

Troubleshooting Vue Unit Tests: Issue with Setting Input Values

I am currently utilizing Vue with typescript and making an effort to perform a unit test on the input value for a login page. The issue lies in the fact that after setting the input value, it does not return as expected – instead, it comes back empty ("" ...

Combine a main document with a document located within its sub-collection

I am managing a database within firestore that has the following structure: -> Chat Room -> Users Within the "ChatRoom" collection, there is a "Users" collection. Each document in the users collection includes a field "read: true/false" to trac ...

What is the best way to divide a string into an array containing both linked and non-linked elements?

I'm struggling to find the right solution to my problem. I need to create a view that is enclosed in a clickable div. The content will consist of plain text mixed with clickable URLs - the issue arises when clicking on a link also triggers the method ...