Angular2 - app.module路由：空路徑不會重定向到組件

我已經爲我的應用添加了登錄功能。當某人用空白路徑（http://example.com）導航到URL時，我希望HomeComponent顯示哪個將激活AuthGuard，但保留URL路徑爲空。我仍在本地進行測試，所以這可能是問題所在？我不確定。Angular2 - app.module路由：空路徑不會重定向到組件

現在發生了什麼 - 當我導航到本地主機：3000 /我什麼也沒有得到，只是一個空白的屏幕。當我導航到localhost：3000/home時，我的HomeComponent顯示沒有問題，但我希望在URL爲localhost：3000 /時調用HomeComponent。

這是我的app.module文件 - 我不太確定我需要發佈哪些其他文件，因爲問題在於路由。就像我說的，我可以通過輸入路徑來找到所有其他組件。但對於家庭，我不想輸入路徑。

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 { }

我自己也嘗試設置這樣我的默認路由，但還是同樣的問題：

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

我的基本href設置爲：

<base href="/" />

我沒有收到任何錯誤，而且我的控制檯看上去很乾淨。再一次，如果我在URL的末尾添加「/ home」，我可以導航，但我需要一個空白的URL路徑以使用AuthGuard顯示HomeComponent。

我已經通過文檔和其他問題，但沒有爲我工作。我不確定我錯過了什麼。任何幫助將不勝感激。讓我知道是否還有其他需要發佈的代碼片段。提前致謝。

來源

2017-07-25 Joe Chaiet

可能重複[Angular 2 AuthGuard服務重定向？]（https://stackoverflow.com/questions/39002288/angular-2-authguard-service-with-redirect） – 0mpurdy

@joe，你打電話給'{path ：''，pathMatch：'full'}'再次在其他地方？我有同樣的問題，並刪除第二個聲明的路徑解決了我的問題。 – teddybear

-1

如果你看一下Configuration section of the routing docs

你可以看到，你在你的第二次嘗試缺少/。您還應該從空路線中刪除AuthGuard。

{ 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
}

您可能還需要更新您的AuthGuard包括什麼是this answer描述如下圖所示

@Injectable() 

export class AuthGuard implements CanActivate { 

    auth: any = {}; 

    constructor(private authService: AuthService, private router: Router) { 

    } 

    canActivate() { 
    if (/*user is logged in*/) { 
     return true; 
    } 
    else { 
     this.router.navigate(['/login']); 
    } 
    return false; 
    } 
}

來源

2017-07-25 13:48:03 0mpurdy

@MaKobi對不起，我在看到你的評論之前評論你的答案，pathMatch設置爲true，所以它不會匹配路徑，除非它**完全匹配它，所以它的順序無關緊要。但是你是對的 - 最好的做法會決定你無論如何都要正確地訂購 – 0mpurdy

我不需要從AuthGuard導航，因爲如果用戶登錄，他們會自動重定向到空路徑 - 哪個*應該*加載/ home，但那是哪裏我的問題 - 我不能得到一個空的路徑來加載任何東西。如果沒有登錄的用戶試圖直接導航到/ home，AuthGuard會將它們重定向到/ login並存儲URL路徑。所以當他們登錄時，他們被重定向到他們想要去的地方（/家庭或者他們使用的任何其他路徑）。 –

如果用RouterGuard導航路由器重定向，則不會發生路由器重定向，您應該使用RouterGuard中的路由器直接導航到最終要路由到的路由。除非我可能誤解了你的問題 - 我會嘗試做一個實例 - 除非你有一個可以嘗試的重擊者？ – 0mpurdy

在角2的路由取決於，像在許多其他框架，順序上你路線。

您的第一條路線與path: ''匹配每個請求並即將執行。但是如果你的用戶沒有被授權，守衛就會阻止這個請求。

我們建議從更具體的路線進行排序，那麼具體是這樣的：

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

利用這種配置到本地主機的請求：3000 /將從最後的路線被獲取，並重定向到/home。通過路線'**'，您將捕獲路線配置中未涵蓋的每個請求，並將其重定向到/，然後將其重定向到家。

我不知道它是否重要，但您的基數設置爲<base href='/' />。 Angular的文檔說它必須是<base href='/'>。

來源

2017-07-25 13:56:22

由於pathMatch設置爲滿，訂單不會有所作爲 – 0mpurdy

Angular2 - app.module路由：空路徑不會重定向到組件

回答

相關問題