Question

我有一个应用程序，需要在此应用程序中根据角色来保护到特定用户的路由。我的应用程序具有Windows身份验证，因此有一个单独的登录页面，因此我直接从app.component.ts调用登录方法。一切正常，就像能够保护路由一样，但是在刷新页面时会再次登录，从而延迟了角色的数据，这意味着在组件加载且无法获取角色的情况下，因此将其重定向到仪表板页面（根据我的要求）以防任何用户无权查看页面）。我知道我必须使用可观察性，但就我而言，代码有点不同。任何人都可以提出实现此目标的最佳方法吗？下面是代码

app.component.ts

ngOnInit() {
  this.commonService.getLogin().subscribe((data: any) => {
    this.appService.roles = data.roles;
  }});

app.service.ts

export class AppService {
  public roles: Role[];// Array of customized class

  getAccessForMenus(menuname: string) {
    let hideMenu = false;
    // Some code... based on some condition hide menu value will vary
    return hideMenu;
  }
}

can-activate-guard.ts

@Injectable()
export class CanActivateAdmin implements CanActivate {
  constructor(private appService: AppService, private router: Router) { };

  canActivate(){

  if (!this.appService.getAccessForMenus('Admin')) {
    this.router.navigateByUrl('dashboard');
  }
  return true;
 }
}

如何在浏览器刷新Angular 4上处理CanActivate

0 个答案: