26

angular2-meteor アプリを 1 つ作成しています。

export const routes: Route[] = [{
    path: '',
    redirectTo: "login",
    pathMatch: "full"
}, 
{
    path: 'login',
    component: LoginComponent
}, 
{
    path: 'csvtemplate',
    component: TemplateComponent,
    canActivate: ['canActivateForLoggedIn'],
    children: [{
        path: '',
        redirectTo: 'dashboard' <----how to add condition for multiple path
    }, 
    {
        path:'dashboard',
        component: DashboardComponent
    },
    {
        path: 'csvtimeline/:month/:year',
        component: CsvTimelineComponent
    }, {
        path: 'csvjson',
        component: CsvJsonComponent
    }]
}];

LoginComponent を使用してアプリにログインすると、3 つの子コンポーネントを持つ TemplateComponent に移動します

  • ダッシュボード
  • csvタイムライン
  • csvjson

これで、デフォルトで、ダッシュボード コンポーネントに redirectTo を設定しました。しかし、このリダイレクトの代わりに、ログイン ユーザー プロファイルに基づいて csvjson コンポーネントまたは csvtimeline コンポーネントにリダイレクトしたいと考えています。

仮定する

ログイン ユーザーが「管理者」の場合は、redirectTo - > ダッシュボード コンポーネントにする必要があります。

ログイン ユーザーが「Guest」の場合は、redirectTo である必要があります - > csvjson コンポーネント

リダイレクト用のダッシュボード コンポーネントの ngOnInit() でこれを実行できることはわかっています。

if (this.user && this.user.profile.role == 'Guest') {
             this._router.navigate(['csvtemplate/csvjson']);
        }

しかし、私はより良いオプションを探しているので、毎回ダッシュボード コンポーネントを開く必要はなく、csvjson コンポーネントに直接移動します。

4

2 に答える 2

20

より良い解決策は次のとおりです。Angularガイドに従って管理機能を保護してください。
CanActivate フックの使用 手順:

1) auth-guard.service.ts ファイルを追加します

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';
import { Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
    canActivate() {
        //Your redirect logic/condition. I use this.

        if (this.user && this.user.profile.role == 'Guest') {
         this.router.navigate(['dashboard']);
        }
        console.log('AuthGuard#canActivate called');
        return true;
    }
    //Constructor 
    constructor(private router: Router) { }
}

2) ルーティング ファイルを更新します。私の場合は app.module.ts です。

import { AuthGuard } from './auth-guard.service';
import { AdminComponent } from './admin/admin.component';
@NgModule({
  declarations: [
    AppComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    RouterModule.forRoot([
        {
          path: 'admin',
          component: AdminComponent,
          canActivate:[AuthGuard]
        },
        {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
       }
    ])
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

**参考** https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

于 2017-06-08T07:11:14.680 に答える