如何通过手动更改angular 2中的url来防止某些用户访问某些组件？

Question

我正在使用 Angular 2，我有一个用于呈现数据的数据表和一个重定向到 '/viewOutgoing;id=data_id' 的点击事件。id 是数据表的数据 id。我有一些用户不应该看到其中的所有数据数据表。但是当他们将 URL 更改为 '/viewOutgoing;id=data_id' 时，他们可以看到数据，即使数据对他们来说是禁止的。我该如何处理？ 这是component.html：

<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>

这是component.ts：

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

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

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

这就是服务：

get_user_permission() {
    this.createAuthenticationHeaders();
    return this.http.get('/authentication/get_user_permission', this.options).map(res => res.json());
  }

这是 get_user_permission 方法：

    router.get('/get_user_permission/', (req, res) => {
    pool.connect((err, client, done) => {
      if (err) {
        console.log(err);
        res.json({ success: false, message: err});
      } else {
        client.query('select * from get_user_permission($1)', [req.decoded.userId], (err, permission) => {
          done();
          if (err) {
            res.json({ success: false, message: err });
          } else {
            res.json({success: true,permission: permission
            });
          }
        });
      }
    });
  });

但我错了！有什么问题？

Answer 1

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

您的路由模块如下所示。

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

路由守卫

@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 ] },