0

新手在这里。我正在尝试为 java Spring Boot 应用程序编写重置密码功能。前端适用于 Angular 7。

用户输入他的电子邮件并单击重置按钮。然后，一个令牌存储在用户表中，用户会收到一封带有如下链接的邮件：

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

当我单击此链接时，出现 404 错误。该应用似乎找不到 ResetPasswordForm 组件。

重置密码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 { }

应用程序路由.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 { }

重置密码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")
    }
  }

}

我使用这个功能已经好几天了，我很累，我想我做错了什么。你可以帮帮我吗？

4

3 回答 3

1

再会！

我可以在reset-password-form.module.ts. 它应该是这样的：

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

在你的app-routing.module.ts：

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

PS还有另一种方法，您也可以从中删除apper路由app-routing.module.ts并将此路由名称移动到reset-password-form.module.ts：

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

问题：根据您当前的路由架构，您的路径名重叠，您ResetPasswordComponent应该可以在此处访问：http://localhost:4200/reset-password/reset-password

Stackblitz 示例：https ://stackblitz.com/edit/angular-lpgp3u

于 2020-04-01T13:04:27.247 回答
1

最小设置演示 - https://stackblitz.com/edit/angular-router-basic-example-k1kbr9

我没有为 ResetPassword 使用单独的模块。但是这个例子可以帮助你在你的代码中处理它。

上面，它还从提供的 URL 中获取令牌值。

希望能帮助到你 ！

于 2020-04-01T13:55:46.950 回答
0

我只是删除了所有内容并从头开始重新进行，现在它可以工作了。不知道我忘记了什么...

于 2020-04-07T06:06:10.673 回答