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

Question

I am trying to implement role guard as per the below url http://coding-karma.com/2018/06/17/role-based-access-control-in-angular-4-route-guards-in-depth/

app.component.html has the following code

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

I have given the role checking in header like below

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

Also after the successful login its going to the respective paths like below

 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']) }

I have only one problem. After successful login the router navigate to respective dashboards, but header it will show only common links. If i refresh the page everything works fine.

If i place the header in the dashboard it works fine. I would like to know is this the right approach ? adding the header in each component separately? Please suggest..

Answer 1

Ideally you should have app module which will render header,content and footer. and You should have dashbaord as a children to app module which will be loaded through route /dashboard. So dashboard should be your lazy loaded children module as shown below

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