从URL访问链接重定向到angular应用程序不起作用

时间:2019-02-13 09:22:50

标签: angular angular-routing

我刚开始接触角度,我想了解布线的工作原理。当用户注册时,我已经创建了一个应用程序,并且将向他们发送一封包含验证链接的电子邮件。验证路径包含用户的ID和验证码。当我尝试访问链接时,该应用程序似乎无法正确加载并产生错误。

这是我的路线:

const routes: Routes = [
{
    path: 'index',
    component: IndexComponent
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: 'signup',
    component: SignupComponent
},
{
    path: 'verify/:userId/:code',
    component: VerifyComponent,
},
];

这些组件位于名为“公共”的模块下。

我不确定这是否有帮助,但这是我的AppModule导入:

imports: [
BrowserModule,
AppRoutingModule,
AppAsideModule,
AppBreadcrumbModule.forRoot(),
AppFooterModule,
AppHeaderModule,
AppSidebarModule,
PerfectScrollbarModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
AccountSettingModule,
DashboardModule,
PublicModule,
HttpClientModule
],

我已经读到这可以通过使用哈希来解决,但是我试图避免使用它。我还阅读了有关URL重写的信息,但我还没有对其进行深入研究。

注意:在某些组件的浏览器中手动输入路线时,我还会遇到应用未加载的情况。

任何帮助或建议将不胜感激。谢谢!

编辑:

这是我正在使用的示例链接:

http://localhost:4200/verify/ba2b6e7a-d508-42b6-7b7e-08d691922233/CfDJ8Itsl344PZFNhS%2BBl0gYyOeKez6UhdY8fDyNrZLI4TudMlmHSiYdYsILhvXzwRPIDBG1X4tN7WBOD5WpPMEFBqoEdkdiEju2bf61hrLHAkR6SkFx5tvAZMeYrDkIR0iRjDgIAfSg6g1JUhiv9z9sSfiTthC2sQGI6ERZ5CidNKP6qADpMeshvowekRGLEprfeSNQaYW%2BxeIBpty38UEkdakHiTpFHsOnTyvgUU%2BC6gnw

这是我尝试在VerifyComponent上获取它的方法:

ngOnInit() {
    this._route.paramMap.subscribe(params => {
      this.userId = params.get('userId');
      this.code = params.get('code');

      this._authService.verifyCode({ UserId: this.userId, Code: this.code}).subscribe(res => {
        //do something after code is validated
        },
        error => console.log(error))
      },
      error => this._router.navigate(['/login']))

    });
  }

0 个答案:

没有答案