auth guard to redirect logged out users to login page

ui/src/app/account/account.route.ts

@@ -1,5 +1,7 @@
 import { Routes } from "@angular/router";
 import { LoginComponent } from "./login/login.component";
+import { AuthGuard } from "./auth.guard";
+import { HomeComponent } from "../home/home.component";
 
 export const routes: Routes = [
     {

ui/src/app/account/auth.guard.ts

@@ -0,0 +1,34 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+
+
+import { StateStorageService } from './service/state-storage.service';
+import { AccountService } from './service/account.service';
+import { Observable, filter, map, take } from 'rxjs';
+
+export const AuthGuard = (route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot): Observable<boolean> | boolean => {
+  const authorities = route.data['authorities'];
+
+  const router = inject(Router);
+  const accountService = inject(AccountService);
+  const stateStorageService = inject(StateStorageService)
+
+  return accountService.getAccountData().pipe(filter(account => account !== undefined),map(account => {
+    console.log(authorities, account);
+
+    if (account) {
+      const hasAnyAuthority = accountService.hasAnyAuthority(authorities);
+      if (hasAnyAuthority) {
+        return true;
+      } else {
+        router.navigate(['accessdenied']);
+        return false;
+      }
+    } else {
+      router.navigate(['/login']);
+      stateStorageService.storeUrl(state.url);
+      return false;
+    }
+  }));
+}

ui/src/app/account/service/account.service.ts

@@ -20,7 +20,7 @@ import { IAccount } from '../model/account.model'
 
 @Injectable({ providedIn: 'root' })
 export class AccountService {
-  private accountData = new BehaviorSubject<IAccount | undefined>(undefined);
+  private accountData = new BehaviorSubject<IAccount | null | undefined>(undefined);
   private isFetchingAccountData = false;
   private stopFetchingAccountData = new Subject();
   private authenticated = false;
@@ -44,10 +44,10 @@ export class AccountService {
       .pipe(
         takeUntil(this.stopFetchingAccountData),
         catchError((err) => {
-          this.accountData.next(undefined)
+          this.authenticated = false
+          this.accountData.next(null)
           // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
           //this.memberService.memberData.next(undefined);
-          this.authenticated = false
           this.authenticationState.next(this.accountData)
           this.isFetchingAccountData = false
           return EMPTY
@@ -56,9 +56,10 @@ export class AccountService {
           this.isFetchingAccountData = false
           this.authenticationState.next(this.accountData)
           if (response && response.body) {
+            this.authenticated = true
             const account: IAccount = response.body
             this.accountData.next(account)
-            this.authenticated = true
+
             // After retrieve the account info, the language will be changed to
             // the user's preferred language configured in the account setting
             if (this.accountData.value?.langKey) {
@@ -71,7 +72,7 @@ export class AccountService {
           } else {
             // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
             //this.memberService.memberData.next(undefined);
-            this.accountData.next(undefined)
+            this.accountData.next(null)
             this.authenticated = false
             console.error('Invalid response:', response)
           }
@@ -121,7 +122,7 @@ export class AccountService {
       !this.authenticated ||
       !this.accountData ||
       !this.accountData.value?.authorities
-    ) {
+    ) {      
       return false
     }
 
@@ -130,7 +131,7 @@ export class AccountService {
         return true
       }
     }
-
+    
     return false
   }
 
@@ -145,7 +146,7 @@ export class AccountService {
     }
   }
 
-  getAccountData(force?: boolean): Observable<IAccount | undefined> {
+  getAccountData(force?: boolean): Observable<IAccount | undefined | null> {
     if (force) {
        // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
       //this.memberService.stopFetchingMemberData.next();

ui/src/app/app-routing.module.ts

@@ -7,6 +7,11 @@ const routes: Routes = [
     path: '',
     loadChildren: () =>
       import('./account/account.module').then(m => m.AccountModule)
+  },
+  {
+    path: '',
+    loadChildren: () =>
+      import('./home/home.module').then(m => m.HomeModule)
   }
 ] 
 

ui/src/app/app.module.ts

@@ -10,13 +10,15 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { NavbarComponent } from './layout/navbar/navbar.component'
 import { CommonModule } from '@angular/common'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { HasAnyAuthorityDirective } from './shared/directive/has-any-authority.directive'
+import { HasAnyAuthorityDirective } from './shared/directive/has-any-authority.directive';
+import { HomeModule } from './home/home.module'
 
 @NgModule({
   declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective],
   imports: [
     FontAwesomeModule,
     AccountModule,
+    HomeModule,
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,

ui/src/app/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

ui/src/app/home/home.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent]
+    });
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/home/home.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+
+}

ui/src/app/home/home.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { routes } from './home.route';
+import { HomeComponent } from './home.component';
+
+@NgModule({
+  declarations: [HomeComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class HomeModule { }

ui/src/app/home/home.route.ts

@@ -0,0 +1,18 @@
+import { Routes } from "@angular/router";
+import { HomeComponent } from "../home/home.component";
+import { AuthGuard } from "../account/auth.guard";
+
+export const routes: Routes = [
+    { 
+
+        path: '',
+        component: HomeComponent,
+        data: {
+          authorities: ['ROLE_USER'],
+          pageTitle: 'home.title.string'
+        },
+        canActivate: [AuthGuard]
+
+    }
+  ];
+