Angular2-app.module路由：空白路径未重定向到组件 [英] Angular2 - app.module routing: blank path not redirecting to component

问题描述

我已在我的应用程序中添加了登录功能。当有人导航到带有空白路径的URL（ http://example.com ）时，我希望HomeComponent显示向上将激活AuthGuard，但将URL路径保留为空白。我仍在本地测试，所以可能是问题所在？我不确定。

I've added a login feature to my app. When someone navigates to the URL with a blank path(http://example.com), I want the HomeComponent to show up which will activate the AuthGuard, but keep the URL path blank. I am still testing locally, so that may be the issue? I'm not sure.

现在发生了什么-当我导航到localhost：3000 /时，什么也没得到，只是一个空白屏幕。当我导航到localhost：3000 / home时，我的HomeComponent可以正常显示，但是我希望在URL为localhost：3000 /时调用HomeComponent。

Whats happening now - when I navigate to localhost:3000/ I get nothing, just a blank screen. When I navigate to localhost:3000/home, I get my HomeComponent to show with no issue but I would like the HomeComponent to be called when the URL is localhost:3000/.

这是我的app.module文件-我不太确定我还需要发布其他文件，因为问题在于路由。就像我说的那样，我可以通过键入路径来访问所有其他组件。但是对于Home，我不需要键入路径。

Here's my app.module file - I'm not really sure what other files I need to post since the issue lies with the routing. Like I said, I can get to all of the other components by typing the path. But for Home, I do not want to have to type the path.

app.module.ts

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   import { HttpModule } from '@angular/http';
   import { RouterModule, Routes } from '@angular/router';

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

   import { HomeComponent } from './home/home.component';

   import { LoginComponent } from './login/login.component';
   import { AlertService } from './login/services/alert.service';
   import { AlertComponent } from './directives/alert.component';
   import { AuthenticationService } from './login/services/authentication.service';
   import { AuthGuard } from './guards/auth.guard';

@NgModule({
imports: [ 
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot([

        { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard] },
        { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
        { path: 'login', component: LoginComponent },
        { path: '**', redirectTo: '', pathMatch: 'full' }

      ]) 
],
providers: [
    AuthGuard,
    AlertService,
    AuthenticationService
],
declarations: [ 
    LoginComponent,
    AlertComponent,
    HomeComponent,
    AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }

我也尝试过设置默认路由，但还是这样：

I have also tried setting my default route like this, but still same issue:

{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard] },

我的基本href设置为：

My base href is set to:

<base href="/" />

我没有收到任何错误，并且控制台看上去很干净。同样，如果我在URL末尾添加 / home，则可以很好地导航，但是我希望使用空白URL路径来显示带有AuthGuard的HomeComponent。

I'm not receiving any errors and my console looks clean. Again, I can navigate just fine if I add "/home" to the end of my URL, but I want a blank URL path to show the HomeComponent with AuthGuard.

我经历过文档和其他问题，但对我没有任何帮助。我不确定我缺少什么。任何帮助将不胜感激。让我知道是否需要发布其他代码片段。预先感谢。

I've been through documentation and other questions but nothing has worked for me. I'm not sure what I'm missing. Any help would be greatly appreciated. Let me know if there are any other code snippets I need to post. Thanks in advance.

推荐答案

在我的情况下，此代码运行良好。

in my case this code bellow work well.

@Injectable()
export class LoggedInGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {


    const isLoggedIn = this.authService.isLoggedIn();
    if (!isLoggedIn) {
        const bool = confirm('Dany access!\nCan i redirect u to login page?');

        return await (bool) ? this.router.navigateByUrl('/login') : this.router.navigateByUrl('/') ;
    }
    return isLoggedIn;
  }
}

我在Ionic项目中看到了这段代码，直到现在我对重定向没有更多问题。

i saw this code in an Ionic project and until now i had no more problem with redirect.

这篇关于Angular2-app.module路由：空白路径未重定向到组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！