从 ngOnInit() 内部调用身份验证失败后，ngOnInit() 被一次又一次地调用

Question

I am working on a simple angular app. There are login.component.ts and home.component.ts.

On successful login, the home.component.ts is being called and it loads posts from post-service.

Unfortunately, due to some issues, (I am still working on) the call to post-service is not being authenticated. However, ngInit method in home.component.ts is being called again and again and browser is loading the home page repeatedly.

Not sure what's going on.

LoginComponent

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AlertService, AuthenticationService } from '../_services';

@Component({templateUrl: 'login.component.html'})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    loading = false;
    submitted = false;
    returnUrl: string;

    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) {}

    ngOnInit() {
        // if(localStorage.getItem('currentUser')){
        //     console.log("User is logged in");
        //     this.router.navigate(['/home']);
        // }

        this.loginForm = this.formBuilder.group({
            email: ['', [Validators.required,   Validators.pattern(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,63})$/)]],
            password: ['', Validators.required]
        });

        // reset login status
        this.authenticationService.logout();

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/home';
    }

    // convenience getter for easy access to form fields
    get f() { return this.loginForm.controls; }

    onSubmit() {

        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) {
            return;
        }

        this.loading = true;
        this.authenticationService.login(this.f.email.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    this.router.navigate(['/home']);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

home.component.ts

 import { Component, OnInit } from '@angular/core';
import { first } from 'rxjs/operators';
import { User } from '../_models';
import { UserService } from '../_services';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
// import { NgxSpinnerService } from 'ngx-spinner';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { error } from 'protractor';

@Component({templateUrl: 'home.component.html'})
export class HomeComponent implements OnInit {
    currentUser: User;
    users: User[] = [];
    allpost;
    notscrolly = true;
    notEmptyPost = true;



    constructor(private userService: UserService, private http: HttpClient, private router: Router,) {
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));

    }

    ngOnInit() {
        if(!this.currentUser){
          this.router.navigate(['/login']);
        }else{
         this.loadInitPost();
        console.log("Inside home component" + localStorage.getItem('currentUser'));
        }

    }

  loadInitPost() {
    const url = 'http://localhost:8080/user/questions';

    const emailId = JSON.parse(localStorage.getItem('currentUser'))['emailId'];
    console.log("email id  is  " + emailId);
    this.http.get(url,  {
      params : {
        'emailId' : JSON.parse(localStorage.getItem('currentUser'))['emailId']
      }

    }).subscribe(data => {
      // this.allpost = data;
      this.allpost = data;
    }, error => {return;});
  }

    deleteUser(id: number) {
        this.userService.delete(id).pipe(first()).subscribe(() => { 
            this.loadAllUsers() 
        });
    }

    private loadAllUsers() {
        this.userService.getAll().pipe(first()).subscribe(users => { 
            this.users = users; 
        });
    }

    onScroll() {
        if (this.notscrolly && this.notEmptyPost) {
        //   this.spinner.show();
          this.notscrolly = false;
          // this.loadNextPost();
       }
      // console.log("scrolled");
      // this.spinner.show();
      }




}

app.module.ts


import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule }    from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { Injectable } from '@angular/core';
import {
    HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
  } from '@angular/common/http';

// import { NgxSpinnerModule } from 'ngx-spinner';

// used to create fake backend
import { fakeBackendProvider } from './_helpers';

import { AppComponent }  from './app.component';
import { routing }        from './app.routing';

import { AlertComponent } from './_directives';
import { AuthGuard } from './_guards';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AlertService, AuthenticationService, UserService } from './_services';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';;
import { LogoutComponent } from './logout/logout.component'


@Injectable()
export class XhrInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const xhr = req.clone({
      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest')
    });
    return next.handle(xhr);
  }
}

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        routing,
        InfiniteScrollModule,
        // NgxSpinnerModule
    ],
    declarations: [
        AppComponent,
        AlertComponent,
        HomeComponent,
        LoginComponent,
        RegisterComponent,
        LogoutComponent
,
        LogoutComponent    ],
    providers: [
        AuthGuard,
        AlertService,
        AuthenticationService,
        UserService,
        { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }

        // provider used to create fake backend
        // fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

However, if I remove security from the backend service. This repeated loading stops.

stackblitz https://stackblitz.com/github/bjs007/angular

Answer 1

You have an ErrorInterceptor which reloads when there is 401.You said there is some authentication issue in post service, see if it returns 401 then your ErrorInterceptor causes page to reload again and again.

 if (err.status === 401) {
            // auto logout if 401 response returned from api
            // this.authenticationService.logout();
            location.reload(true);
 }

you can navigate to login page when you get 401 this.router.navigate(['/login']);

Answer 2

Instead of location.reload(true) Put following in your ErrorInterceptor

 if (err.status === 401) {
            this.router.navigate(['/home']);
 }