angular security course

Author: Your Name

src/app/app.component.html

@@ -9,7 +9,7 @@
         <li>
             <a routerLink="/lessons">Lessons</a>
         </li>
-        <li>
+        <li *rbacAllow="['ADMIN']">
             <a routerLink="/admin">Admin</a>
         </li>
         <li *ngIf="isLoggedOut$ | async">

src/app/app.module.ts

@@ -1,18 +1,18 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
 import {NgModule, Provider} from '@angular/core';
 import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
 
-import { AppComponent } from './app.component';
-import { LessonsComponent } from './lessons/lessons.component';
-import { LoginComponent } from './login/login.component';
-import { SignupComponent } from './signup/signup.component';
+import {AppComponent} from './app.component';
+import {LessonsComponent} from './lessons/lessons.component';
+import {LoginComponent} from './login/login.component';
+import {SignupComponent} from './signup/signup.component';
 import {routesConfig} from "./routes.config";
 import {LessonsService} from "./services/lessons.service";
 import {ReactiveFormsModule} from "@angular/forms";
 
 import {AuthService} from "./services/auth.service";
-import { AdminComponent } from './admin/admin.component';
-import { RouterModule} from "@angular/router";
+import {AdminComponent} from './admin/admin.component';
+import {RouterModule} from "@angular/router";
 
 
 import 'rxjs/add/operator/switchMap';
@@ -23,33 +23,33 @@ import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/first';
 import 'rxjs/add/observable/of';
-
-
+import {RbacAllowDirective} from "./common/rbac-allow.directive";
 
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    LessonsComponent,
-    LoginComponent,
-    SignupComponent,
-    AdminComponent
-  ],
-  imports: [
-    BrowserModule,
-      HttpClientModule,
-      HttpClientXsrfModule.withOptions({
-         cookieName: 'XSRF-TOKEN',
-         headerName:  'x-xsrf-token'
-      }),
-      RouterModule.forRoot(routesConfig),
-      ReactiveFormsModule
-  ],
-  providers: [
-      LessonsService,
-      AuthService
-  ],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        LessonsComponent,
+        LoginComponent,
+        SignupComponent,
+        AdminComponent,
+        RbacAllowDirective
+    ],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        HttpClientXsrfModule.withOptions({
+            cookieName: 'XSRF-TOKEN',
+            headerName: 'x-xsrf-token'
+        }),
+        RouterModule.forRoot(routesConfig),
+        ReactiveFormsModule
+    ],
+    providers: [
+        LessonsService,
+        AuthService
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 

src/app/common/rbac-allow.directive.ts

@@ -0,0 +1,74 @@
+
+
+
+import {Directive, Input, OnDestroy, TemplateRef, ViewContainerRef} from "@angular/core";
+import {AuthService} from "../services/auth.service";
+import {User} from "../model/user";
+import {Subscription} from "rxjs/Subscription";
+import * as _ from 'lodash';
+
+@Directive({
+    selector:"[rbacAllow]"
+})
+export class RbacAllowDirective implements OnDestroy {
+
+    allowedRoles:string[];
+    user:User;
+
+    sub:Subscription;
+
+    constructor(
+        private templateRef: TemplateRef<any>,
+        private viewContainer: ViewContainerRef,
+        private authService: AuthService) {
+
+        this.sub = authService.user$.subscribe(
+            user => {
+                this.user = user;
+                this.showIfUserAllowed();
+            });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    @Input()
+    set rbacAllow(allowedRoles: string[]) {
+        this.allowedRoles = allowedRoles;
+        this.showIfUserAllowed();
+    }
+
+    showIfUserAllowed() {
+
+        if (!this.allowedRoles || this.allowedRoles.length === 0 ||
+            !this.user) {
+            this.viewContainer.clear();
+            return;
+        }
+
+        const isUserAllowed =
+            _.intersection(this.allowedRoles, this.user.roles).length > 0;
+
+
+        if (isUserAllowed) {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+        else {
+            this.viewContainer.clear();
+        }
+
+    }
+
+}
+
+
+
+
+
+
+
+
+
+
+