Header 组件可以添加到每个组件中 HTML Angular 8

Question

我正在尝试按照以下方式实施角色保护 url http://coding-karma.com/2018/06/17/role-based-access-control-in-angular-4-route-guards-in-depth/

app.component.html有如下代码

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

我已经在 header 中给出了角色检查，如下所示

export class HeaderComponent implements OnInit {
constructor( private authService: authService,   private router: Router) {
    const token = localStorage.getItem('jwt');
    const tokenPayload = decode(token);
    console.log("tokenPayload.role", tokenPayload.role);
    this.Role = tokenPayload.role;
   }
 
   getRoleB(){
     if(this.Role=='FA' || this.Role=='FTH'){
       return true;
     }
     else{
      return false;
     }
   }
 
   getRoleC(){
    if(this.Role=='FA' || this.Role=='FTH' || this.Role=='FT'){
      return true;
    }
    else{
     return false;
    }
  }
}

同样在成功登录后，它会转到如下所示的相应路径

const token = localStorage.getItem('token');
 
      // decode the token to get its payload
      const tokenPayload = decode(token);
      console.log(tokenPayload);
      if (tokenPayload['user_role'] == "user"){
        this.router.navigate(['/dashboard'])
            
      } else {
        this.router.navigate(['admin/dashboard'])
      }

我只有一个问题。成功登录后，路由器导航到相应的仪表板，但 header 它只会显示公共链接。如果我刷新页面，一切正常。

如果我将 header 放在仪表板中，它就可以正常工作。我想知道这是正确的方法吗？在每个组件中分别添加 header ？请建议..

Answer 1

理想情况下，您应该拥有可呈现页眉、内容和页脚的应用程序模块。并且您应该将 dashbaord 作为应用程序模块的子项，该模块将通过路由 /dashboard 加载。所以仪表板应该是您的延迟加载子模块，如下所示

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: './dashboards/dashboards.module#DashboardsModule'
  }
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

Header 组件可以添加到每个组件中 HTML Angular 8

Header component can be added in to every component HTML Angular 8

angular

header

refresh

router