Angular2ルーティングは各URLのログインを経由します

Question

私たちのアプリでは、複数の経路定義があります。そして私たちは何かを台無しにしたと思う。 URLを手書きで書くことができず、適切なコンポーネントを読み込むことができません。私たちは毎回/ loginにリダイレクトされ、ユーザーがにログインしている場合は/ accountにリダイレクトされます。

ルーティングの改善点はありますか？私はそれが本当に効率的ではなく、「よく作られた」と思う。私たちは私たちの脳を私たち自身のルーティング経路で燃やしてしまい、外部の視点は高く評価されます。

シークレットはシークレットアプリケーションで、シークレットリクエストフォームをユーザーに表示するだけです。

例えば

、秘密/用語/アクセス/アカウントにしようとすると、ユーザーが現在ログインしているので、バックアカウントに[ログインするために私達をリダイレクト...

ここでは、私たちのルートです：

app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { LoginComponent } from './login/login.component'; 
import { AccountComponent } from './account/account.component'; 

import { accountRoutes } from './account/account.routes'; 
import { CanActivateViaAuthGuard } from './login/services/auth-guard.service'; 

const appRoutes: Routes = [ 
    { path: '', component: LoginComponent }, 
    { path: 'login', component: LoginComponent }, 
    { 
    path: 'account', 
    component: AccountComponent, 
    canActivate: [CanActivateViaAuthGuard], 
    children: accountRoutes 
    }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '/' } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

まず側の質問：オンルートで、LoginComponentを直接呼び出すのではなく、ログインにリダイレクトする必要がありますか？

./account/account-routes.ts

import { Routes } from '@angular/router'; 

import { DashboardComponent } from './dashboard.component'; 
import { SecretComponent } from './secret/secret.component'; 

import { secretRoutes } from './secret/secret.routes'; 

export const accountRoutes: Routes = [ 
    { path: '', component: DashboardComponent }, 
    { path: 'secret', component: SecretComponent, children: secretRoutes }, 

    // otherwise call DashboardComponent 
    { path: '**', component: DashboardComponent } 
]; 

そして最後に、

アカウント/秘密/ secret.routes.ts：

import { Routes } from '@angular/router'; 
import { SecretFormComponent } from './secret-form.component'; 
import { SecretTermsComponent } from './secret-terms.component'; 
import { TermsGuard } from './services/terms-guard.service'; 

export const secretRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'form' 
    }, 
    { 
    path: 'form', 
    component: SecretFormComponent, 
    canActivate: [TermsGuard] 
    }, 
    { path: 'terms', component: SecretTermsComponent } 

    // otherwise redirect to form 
    { path: '**', redirectTo: 'form' } 
]; 

Answer 1

あなたの問題はおそらくデフォルトのPathLocationStrategyを使用していることが原因です。これにより、ブラウザのアドレスバーにルートの直接URLを入力すると、サーバーに要求が行われます。サーバーは、ルーティングするときに指定されたリソースを見つけることができません。サーバーは、リソースが見つからないときはいつでもホーム・ページにリダイレクトするように構成されている可能性があります。

HashLocationStrategyに切り替えると、サーバーへの要求は行われず、ブラウザーに直接ルートURLを入力すると機能します。

ちょうどあなたの@NgModule注釈にこれを追加します。

providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}]