The local storage gets wiped clean whenever I am using this.router.navigate

I am in the process of building a website using Angular 5 and Typescript. One important aspect of my implementation is utilizing localStorage to store the JWT Token for user login.

Whenever I click on a link (either Home or any other link), I implement a function similar to this one:

public toHome() {
    this.router.navigate(['']);
}

However, after clicking on the link, both my localStorage and sessionStorage are cleared, resulting in the user being logged out.

If anyone can provide assistance, it would be greatly appreciated. Thank you.

angulartypescriptsessionangular-ui-router

Answer №1

A better practice is to avoid using routing in the HTML file. Instead, you can utilize the Router function during form submission in the component.ts file by implementing this code: this.router.navigate(['/path']);

Make sure to also import the Router file and include it in the constructor.

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

Troubleshooting: Angular 6 issue - Unable to toggle visibility using ngIf

I am currently learning Angular and I'm working on the app.component.html as shown below: <app-login *ngIf="!loggedIn"></app-login> <section *ngIf="loggedIn" style="background:#EBF0F5;"> <div class="container"> ...

angular

A Promise is automatically returned by async functions

async saveUserToDatabase(userData: IUser): Promise<User | null> { const { username, role, password, email } = userData; const newUser = new User(); newUser.username = username; newUser.role = role; newUser.pass ...

javascriptnode.jstypescriptpromise

Is there a way to instruct Babel to generate polyfills such as `__createClass` only once for multiple files?

In my project, I have multiple ES6 files, each containing at least one class. For every file, the __createClass, __interopRequireDefault, and __classCallback polyfilling functions are generated. I plan to concatenate them using browserify, but it seems re ...

node.jstypescriptbabeljs

Angular 6 - Share content easily on mobile devices (IOS, Android)

After reviewing this example detailing the use of Angular 5 for copying to clipboard, I encountered issues when trying to run it on the iPhone 6s. Is there a more comprehensive solution available? ...

javascriptangular

The types for Cypress are not being detected by my Angular tsconfig file

I'm facing an issue with my Angular tsconfig not detecting the Cypress 12.3 types. I have tried numerous solutions to resolve this problem, but nothing seems to work, except for the extreme measure of starting the project over, which I think might sol ...

typescriptcypresstypescript-typings

The parameter 'X' cannot be assigned to the argument of type 'X'

Hello there! I'm diving into Type Script for the first time with VSCode. Encountering these errors: error TS2322: Type '() => string' is not assignable to type 'string'. error TS2322: Type '() => number' is ...

typescriptvisual-studio-code

Tips for converting API data to DTO (Data Transfer Object) using TypeScript

Here is an array of vehicles with their details. export const fetchDataFromApi = () => { return [ { vehicleId: 1, vehicleType: 'car', seats: 4, wheelType: 'summer', updatedAt: new Date().toISOString }, { vehicleId: 2, vehic ...

javascripttypescriptdto

Disabling flow control to test an Angular app in Protractor results in an error being generated

I've been battling with this issue for quite some time now and my energy is running low. I am currently attempting to test an Angular application using protractor and async/await. The documentation suggests that I need to disable the control flow by a ...

node.jsangularseleniumjasmineprotractor

Switch between div elements in Angular 2 while dynamically changing their values depending on a specific condition for displaying or hiding

After referring to the solution found in (Hide/show individual items inside ngFor), I am facing a challenge regarding setting the value of pinMe[j] based on a condition. In my scenario, I need to toggle between div elements while also determining what shou ...

angularhiddenngfor

Creating a Custom TreeView in VS Code using JSON data

My goal is to create a TreeView using data from a JSON file or REST call, with custom icons for each type of object (Server, Host, and Group). I want to implement configuration.menu similar to the dynamic context menu discussed in this thread. I am relati ...

jsontypescriptvisual-studio-codevscode-extensions

What could be causing NestJS/TypeORM to remove the attribute passed in during save operation?

Embarking on my Nest JS journey, I set up my first project to familiarize myself with it. Despite successfully working with the Organization entity, I encountered a roadblock when trying to create a User - organizationId IS NULL and cannot be saved. Here ...

javascripttypescriptnestjstypeorm

Personalized angular subscription malfunction

Recently, as I dive into learning Angular 6, a question has arisen regarding the subscribe method and error handling. A typical use of the subscribe function on an observable typically appears like this: this.myService.myFunction(this.myArg).subscribe( ...

angulartypescripthttp

Uncertain about where and how to properly register a service in Angular 2

All: Today was my first day diving into Angular2, as I embarked on the official TUTORIAL at part 6: Routing Around the App https://angular.io/docs/ts/latest/tutorial/toh-pt5.html Within the Create AppComponent section, it is mentioned: Add HeroService ...

angular

Leverage the power of Filesaver.js in conjunction with Angular

I've searched through all the articles I could find about integrating Filesaver JS with Angular, but I'm still struggling to find a solution that works for me. In my system.config.js file, I included the following code in the map section: ' ...

angulardownloadsave-asfilesaver.js

Issue with applying Angular animation to child element

Here I have set up two different animations. animations: [ trigger('fadeIn', [ transition('void => *', [ style({opacity: 0}), animate(500), ]), ]), trigger('fallIn',[ transition ...

htmlangulartypescriptanimation

The deserializeUser function in PassportJS is being ignored

My setup involves using Passport to authenticate users stored in mongodb. Everything seems to be working fine with authentication, including successful and failed login attempts as well as setting session variables. However, I am facing an issue where Pass ...

node.jssessionpassport.js

Having trouble locating the Nativescript-theme-core file for your Nativescript application?

I'm currently working on a basic barcode scanner app and encountering an unusual error once the app is deployed to a Genymotion emulator. It appears to be searching for the core theme in the incorrect location. Any thoughts on why this issue is occurr ...

cssangularnativescript

Is it possible to utilize a partial entity for saving with TypeORM?

My current table structure looks like this: --changeset 0004-order:ccushing create table if not exists "order"."order" ( id uuid primary key not null default uuid_generate_v4(), state uuid re ...

typescripttypeormtypeorm-datamapper

Manipulating objects from an HTTP Observable while iterating through an Array of objects

I am currently working on processing each element of an array by making a separate HTTP call for each element. I need to track the status of each call and update the UI once all calls are completed. The code snippet below demonstrates my current approach: ...

typescriptangularrxjs

`AngularJS Voice Recognition Solutions`

In my quest to implement voice recognition in an AngularJS application I'm developing for Android and Electron, I've encountered some challenges. While I've already discovered a suitable solution for Android using ng-speech-recognition, fin ...

javascriptangularjstypescriptspeech-recognitionvoice-recognition