Компонент заголовка может быть добавлен к каждому компоненту HTML Angular 8 - PullRequest
Новая
       23

Компонент заголовка может быть добавлен к каждому компоненту HTML Angular 8

0 голосов
/ 27 февраля 2020

Я пытаюсь реализовать функцию защиты роли согласно приведенному ниже 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>

Я дал проверку роли в заголовке, как показано ниже 

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

У меня только одна проблема. После успешного входа в систему маршрутизатор перейдет к соответствующим панелям мониторинга, но в заголовке будут показаны только общие ссылки. Если я refre sh страница все работает нормально.

Если я помещаю заголовок в приборной панели, он работает нормально. Я хотел бы знать, это правильный подход? добавить заголовок в каждый компонент отдельно? Пожалуйста, предложите ..

1 Ответ

0 голосов
/ 27 февраля 2020

В идеале у вас должен быть модуль приложения, который будет отображать верхний и нижний колонтитулы. и вы должны иметь dashbaord в качестве дочернего модуля для приложения, которое будет загружаться через route / 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 { }
...