0

我正在创建一个 angular2 应用程序。

export const routes: Route[] = [
{path: '',redirectTo: "login",pathMatch: "full" }, 
{path: 'login', component: LoginComponent }, 
{path: 'dashboard', component: DashboardComponent,canActivate:[AuthGuard], children:
    [
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: 'A', component: AComponent },
        { path: 'B', component: BComponent },

        { path: 'C', component: CComponent },
        { path: 'D', component: DComponent },
    ]
}];

当我使用 LoginComponent 登录我的应用程序时，它将转到具有四个子组件的 DashboardComponent

  1. -一个
  2. -B
  3. -C
  4. -D

现在，我默认将 redirectTo 设置为我的仪表板组件。但代替此重定向，我想根据登录类型（例如他是管理员、超级管理员、学生或教师）重定向到路由 A、B、C、D。

认为

如果登录用户是“管理员”，他应该重定向到->仪表板/A

如果登录用户是“老师”，那么他应该重定向到 - >dashboard/B

我已经像这样创建了 authGuard

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(public router: Router){ }

    canActivate(){
        if(localStorage.getItem('userData')){
            return true;
        }

        // this.router.navigateByUrl('/');
        return false;
    }
}

export class activateEmployee implements CanActivate {

    constructor(){ }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
        console.log(localStorage.getItem('userData'), "employee");
        if(localStorage.getItem('userData') == 'superadmin'){
            return true;
        }

        // this.router.navigateByUrl('/');
        return false;
    }
}

export class activateSuperAdmin implements CanActivate {

    constructor(public router: Router){ }

    canActivate(){
        console.log(localStorage.getItem('userData'), "Superadmin");
        if(localStorage.getItem('userData') == 'superadmin'){
            return true;
        }

        return false;
    }
}

export class activateAdmin implements CanActivate {

    constructor(public router: Router){ }

    canActivate(){
        console.log(localStorage.getItem('userData'),"Admin");
        if(localStorage.getItem('userData') == 'admin'){
            return true;
        }

        return false;
    }
}

PS：我的主要目标是保护路线，如果有人知道受保护路线的 URL，即使他无法去那里。或者我们可以说我想要一个服务中的多个 authGuard 之类的东西。

更新

现在我已经为路由创建了不同的类，但是我收到了这个错误，不知道为什么？错误是

 Can't resolve all parameters for activateAdmin: (?).
4

2 回答 2

2

您可以像这样在路由保护中使用 switch/if-else 来重构它，而不是创建 4 个不同的路由保护

canActivate(){
  let theRole = localStorage.getItem('userData');
  switch(theRole){
   case "admin": { 
       this.router.navigate(['/dashboard/a']);
      return true;
   } 
   case "teacher": { 
     this.router.navigate(['/dashboard/b']);
      return true;       
   } 
   case "superadmin": {
     this.router.navigate(['/dashboard/c']);
     return true;    
   } 
   case "student": { 
  this.router.navigate(['/dashboard/d']);
    return true;
   }  
   default: { 
    this.router.navigate(['/login'])
     return false;           
   } 
  }

如果有 4 个不同的路线守卫适合您，则无需遵循代码。最后，它仍然归结为您团队的个人偏好或实践

于 2017-07-20T11:09:58.887 回答
0

得到了解决方案（来自这里的提示）

我只需要通过实现CanActivate条件来创建不同的类，这样你就可以像这样将保护应用到你的路由中

{path: 'dashboard', component: DashboardComponent,canActivate:[AuthGuard], children:
    [
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: 'A', component: AComponent , canActivate: [activateA]},
        { path: 'B', component: BComponent , canActivate: [activateB]},
        .....
于 2017-07-20T07:05:52.950 回答