如何通过手动更改角度2中的URL来阻止某些用户访问某些组件?

时间:2018-03-11 08:47:54

标签: angular datatable routing routes

我正在使用角度2,我有一个用于渲染数据的数据表和一个重定向到singleton.getInstance(this) 的点击事件.id是数据表的数据ID。我有一些用户不应该看到所有数据数据表中的数据。但是当他们将URL更改为 public static synchronized AppSingleton getInstance(Context context) { if (mAppSingletonInstance == null) { mAppSingletonInstance = new AppSingleton(context); } return mAppSingletonInstance; } 时,即使数据被禁止,他们也可以看到数据。我怎么处理呢? 这是component.html:

'/viewOutgoing;id=data_id'

这是component.ts:

'/viewOutgoing;id=data_id'

我在我的一项服务中有一个方法,我需要获取数据来激活路线。我正在使用:

<ngx-datatable-column prop="title">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
  <span (click)="sort()" class="font">{{'OutgoingTable.Title' | translate}}</span>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
  <a class="data_font" (click)="showOutgingViewForm(row.id)">{{value}}</a>
</ng-template>

这是服务:

showOutgingViewForm(id) {
this.router.navigate(['/viewoutgoing', { id: id }]);
  }

这是get_user_permission方法:

 canActivate() {
    this.authService.get_user_permission().subscribe(perm => {
      if (perm.permission.rows[0].show_all = true) {
        return true;
      } else {
        return false;
      }
    })
  }
}

但是我犯了错误!问题是什么?

1 个答案:

答案 0 :(得分:0)

您应该使用[routeGuard][1]来检查权限。

你的路由模块看起来像这样。

 path: 'viewoutgoing/:id', component: YourComponent, canActivate: [AuthGuard] },

RouteGuard

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router) {


}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if (this.if (route.params[id] === 'yourRole') {
       //Do return  true
        return true;
    }


    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
}

根据您的评论,您有多重警卫。你可以尝试这样的场景。

@Injectable()
export class RoleGuard implements CanActivate {

constructor(private _authGuard: AuthGuard) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this._authGuard.canActivate(route, state).then((auth: boolean) => 
  {
        if(!auth) {
           return Promise.resolve(false);
        }
        //... your role guard check code goes here
    });
  }

路由模块

 path: 'viewoutgoing/:id', component: YourComponent, canActivate: [RoleGuard ] },