Angular Security course

Author: jhades

server/create-user.route.ts

@@ -44,7 +44,7 @@ async function createUserAndSession(res:Response, credentials) {
 
     res.cookie("XSRF-TOKEN", csrfToken);
 
-    res.status(200).json({id:user.id, email:user.email});
+    res.status(200).json({id:user.id, email:user.email, roles: user.roles});
 }
 
 

server/database.ts

@@ -30,9 +30,7 @@ class InMemoryDatabase {
             id,
             email,
             passwordDigest,
-            roles: {
-                "STUDENT":true
-            }
+            roles: ["STUDENT"]
         };
 
         USERS[id] = user;

server/login.route.ts

@@ -37,7 +37,7 @@ async function loginAndBuildResponse(credentials:any, user:DbUser,  res: Respons
 
         res.cookie("XSRF-TOKEN", csrfToken);
 
-        res.status(200).json({id:user.id, email:user.email});
+        res.status(200).json({id:user.id, email:user.email, roles: user.roles});
 
     }
     catch(err) {

src/app/app.module.ts

@@ -1,12 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+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 {RouterModule} from "@angular/router";
 import {routesConfig} from "./routes.config";
 import {LessonsService} from "./services/lessons.service";
 import {ReactiveFormsModule} from "@angular/forms";
@@ -19,9 +18,14 @@ import 'rxjs/add/operator/shareReplay';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/catch';
-
+import 'rxjs/add/operator/first';
 import 'rxjs/add/observable/of';
 import { AdminComponent } from './admin/admin.component';
+import {AuthorizationGuard} from "./services/auth.guard";
+import {Router, RouterModule} from "@angular/router";
+
+
+
 
 
 @NgModule({
@@ -42,7 +46,19 @@ import { AdminComponent } from './admin/admin.component';
       RouterModule.forRoot(routesConfig),
       ReactiveFormsModule
   ],
-  providers: [LessonsService, AuthService],
+  providers: [
+      {
+          provide: 'adminsOnlyGuard',
+          useFactory: (authService:AuthService,
+                       router:Router) => new AuthorizationGuard(['ADMIN'], authService, router),
+          deps: [
+              AuthService,
+              Router
+          ]
+      },
+      LessonsService,
+      AuthService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/routes.config.ts

@@ -19,7 +19,8 @@ export const routesConfig: Routes = [
     },
     {
         path: 'admin',
-        component: AdminComponent
+        component: AdminComponent,
+        canActivate: ["adminsOnlyGuard"]
     },
     {
         path: '',

src/app/services/auth.guard.ts

@@ -0,0 +1,29 @@
+import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
+import {Observable} from "rxjs/Rx";
+import {Injectable} from "@angular/core";
+import {AuthService} from "./auth.service";
+import * as _ from 'lodash';
+
+@Injectable()
+export class AuthorizationGuard implements CanActivate {
+
+    constructor(private allowedRoles: string[], private authService:AuthService, private router:Router) {
+
+    }
+
+    canActivate(route:ActivatedRouteSnapshot,
+                state:RouterStateSnapshot):Observable<boolean> {
+
+        return this.authService.user$
+            .do(user => console.log(user, this.allowedRoles, _.intersection(user.roles, this.allowedRoles)))
+            .map(user => _.intersection(user.roles, this.allowedRoles).length > 0)
+            .first()
+            .do(allowed => {
+                console.log(allowed);
+                if(!allowed) {
+                    this.router.navigate(['/lessons']);
+                }
+            });
+    }
+
+}