web-dev-qa-db-ja.com

Angular 2.の条件に基づいて特定のルートにリダイレクトする方法

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に移動します

  • ダッシュボード
  • csvtimeline
  • csvjson

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

と思います

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

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

リダイレクトのダッシュボードコンポーネントのngOnInit（）でこれを実行できることを知っています。

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

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

angularangular2-routingangular2-meteor
13
Amit kumar

これがより良い解決策です管理機能をガード 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

6
abdul hameed

ルーティングモジュールでは、ローカル変数「ルート」を作成する必要があります。条件をチェックして割り当て、ルーティングパスに変数を割り当て、ルーティングでredirectToに変数を割り当てます

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

var route: string = "user";
const role = JSON.parse(localStorage.getItem("currentUser")).roleId;

if (role == "1") {
//superadmin role
 route = "project"
} else {
  //normal user role
  route = "user"
}
const adminRoutes: Routes = [ {
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [

  { path: '', redirectTo: route },
  {
    path: 'project',
    loadChildren: './project-dashboard/project-dashboard.module#ProjectModule'
  }, {
    path: 'user',
    loadChildren: './user/user.module#UserModule',
  }
0
Fir