Nowicjusz tutaj. Próbuję zakodować funkcję resetowania hasła dla aplikacji Java Spring Boot. Przód współpracuje z Angular 7.

Użytkownik wpisuje swój adres e-mail i klika przycisk resetowania. Następnie token jest przechowywany w tabeli użytkowników, a użytkownik otrzymuje wiadomość e-mail z linkiem takim jak ten:

http://localhost:4200/reset-password?token=7f278bf1-40c7-4b1a-bde5-76744b866241

Kiedy klikam ten link, pojawia się błąd 404. Wygląda na to, że aplikacja nie znajduje składnika ResetPasswordForm.

Reset-password-form.module.ts:

import { ResetPasswordFormComponent } from './reset-password-form.component';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material/material.module';
import { ClassementModule } from '../classement/classement.module';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordFormComponent }
    // { path: '', component: HomeComponent }
  ];

  @NgModule({
    declarations: [ResetPasswordFormComponent],
    imports: [
      CommonModule,
      MaterialModule,
      ClassementModule,
      HttpClientModule,
      RouterModule.forChild(routes)
    ]
  })
  export class ResetPasswordModule { }

App-routing.module.ts:

...
import { ResetPasswordFormComponent } from './site/reset-password-form/reset-password-form.component';
...
{ path: 'reset-password', component: ResetPasswordFormComponent}
...
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

App.module.ts

...
import { ResetPasswordModule } from './site/reset-password-form/reset-password-form.module';
...
@NgModule({
  declarations: [
    AppComponent,
    ConfirmDialogComponent,
    UserComponent,
    AlertComponent,
  ],
  imports: [
    ...
    ResetPasswordModule
  ],
  providers: [httpInterceptorProviders, {provide: LOCALE_ID, useValue: "fr-FR", }, DatePipe],
  entryComponents: [ConfirmDialogComponent, AlertComponent],
  bootstrap: [AppComponent]
})

export class AppModule { }

Reset-password-form.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-reset-password-form',
  templateUrl: './reset-password-form.component.html',
  styleUrls: ['./reset-password-form.component.scss']
})
export class ResetPasswordFormComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
    if(this.authService.isLoggedIn) {
      console.log("logged in")
    }
    else {
      console.log("not logged in")
    }
  }

}

Minęło kilka dni, kiedy korzystałem z tej funkcji i jestem dość zmęczony, myślę, że zrobiłem coś nie tak. Czy mógłbyś mi pomóc?

0
Sebriniel 1 kwiecień 2020, 15:49

3 odpowiedzi

Najlepsza odpowiedź

Po prostu wymazałem wszystko i zrobiłem to ponownie od zera i teraz działa. Nie wiem, o czym zapomniałem ...

0
Sebriniel 7 kwiecień 2020, 06:06

Demo konfiguracji minimalnej - https://stackblitz.com/edit/angular-router- podstawowy przykład-k1kbr9

Nie korzystałem z osobnego modułu dla ResetPassword. Ale ten przykład pomoże ci poradzić sobie z tym w kodzie.

Powyżej pobiera również wartość tokenu z podanego adresu URL.

Mam nadzieję, że to pomoże !

1
Shubham Bhokare 1 kwiecień 2020, 13:55

Dobry dzień!

Przypuszczam, że ten problem w reset-password-form.module.ts. Powinien wyglądać tak:

const routes: Routes = [
    { path: '', component: ResetPasswordFormComponent }
];

W Twoim app-routing.module.ts:

{
  path: 'reset-password',
  loadChildren: () => import('./reset-password.module').then(m => m.ResetPasswordModule)
},

P.S. I inne podejście, możesz także usunąć apper route z app-routing.module.ts i po prostu przenieść tę nazwę trasy do reset-password-form.module.ts:

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordFormComponent }
];

Problem: zgodnie z aktualną architekturą routingu nazwy ścieżek pokrywają się, a ResetPasswordComponent powinien być dostępny tutaj: http://localhost:4200/reset-password/reset-password

Przykład Stackblitz: https://stackblitz.com/edit/angular-lpgp3u

1
AlexanderFSP 1 kwiecień 2020, 13:56