I am encountering an issue while trying to secure a route in my Angular application. Despite what I believe to be the correct implementation, I am facing an error message when the negative scenario is triggered:
ERROR Error: Uncaught (in promise): [object Boolean]Routing Module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RecipesComponent } from './recipes/recipes.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
import { AuthGuard } from './shared/guard.service';
const appRoutes: Routes = [
{path: '', redirectTo: '/recipes', pathMatch: 'full' },
{path: 'recipes', component: RecipesComponent,
children:[
{path: '', component: RecipeStartComponent},
{path: 'new', component:RecipeEditComponent},
{path: ':id', component: RecipeDetailComponent, canActivate: [AuthGuard]},
{path: ':id/edit', component:RecipeEditComponent}
]},
{path: 'shopping-list', component: ShoppingListComponent}
]
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Auth Service
import { OnDestroy, Injectable } from "@angular/core";
import { RecipeService } from "../recipes/recipe.service";
@Injectable()
export class AuthService implements OnDestroy {
constructor(private recipeService: RecipeService){
console.log(this.loadedRecipe)
}
private loadedRecipe: boolean = false
setRecipe(){
this.loadedRecipe = true;
console.log(`setting the recipe to true`)
}
isAuthenticated() {
const promise = new Promise(
(resolve, reject) => {
if(this.recipeService.getRecipes().length > 0){
console.log(`resolving`)
resolve(true)
}else{
console.log(`rejecting`)
reject(false)
}
}
);
return promise;
}
ngOnDestroy()
{
console.log(this.loadedRecipe);
}
}
Guard Service
import {
CanActivate,
CanActivateChild,
ActivatedRouteSnapshot,
RouterStateSnapshot,
Router
} from '@angular/router';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs'
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.isAuthenticated()
.then(
(authenticated: boolean) => {
if (authenticated) {
console.log(`got here1`)
return true;
} else {
console.log(`got here2`)
this.router.navigate(['/recipes']);
}
}
)
}
canActivateChild(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.canActivate(route, state);
}
}
If anyone can shed light on what might be causing this issue, I would greatly appreciate it!