Блог

Я использую Angular 12 Мне нужно перенаправить на страницу входа в систему, если пользователь пытался получить доступ к странице, для доступа к ней необходимо пройти аутентификацию. Я пытался использовать это, но мне не удалось, я использовал gurd

admin.gurd.ts

   export class AdminGuard implements CanActivate {
  constructor(private accountService: AccountService, private toastr:ToastrService,private router:Router) { }

  canActivate(): Observable<boolean>{
    return this.accountService.currentUser$.pipe(
      map((user:User)=>{
        if (!user.role.includes('Administrator') || !user.role.includes('Customer') || !user.role.includes('Seller'))return true;
        this.router.navigate(['/']);
        this.toastr.error("You Not Allowed To Enter Here")
        return false;
      })
    )
  }

}
 

приложение-маршрутизация.moudle.ts

 const routes: Routes = [
  {
    path: 'controlPanel', component: MainComponent,canActivate:[AdminGuard],
    children:[
      {path: '', component: HomeComponent}
    ]
  },
  {path: 'login', component: LoginComponent},
  {path: '', component: LoginComponent},
  {path: '**', redirectTo: '', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
 

Вы можете обновить файл «admin.gurd.ts» с помощью приведенного ниже кода

 export class AdminGuard implements CanActivate {
  constructor(private accountService: AccountService, private toastr:ToastrService,private router:Router) { }

  canActivate(): Observable<boolean>{
    return this.accountService.currentUser$.pipe(
      map((user:User)=>{
        if (!user.role.includes('Administrator') || !user.role.includes('Customer') || !user.role.includes('Seller'))return true;         
        this.toastr.error("You Not Allowed To Enter Here")
        // Updated Line
        this.router.navigateByUrl('/login'));
        return false;
      })
    )
  }

}
 

Наблюдаемое, возвращенное от охранников canActivate , должно завершиться для углового, чтобы вызвать охрану. Вы можете завершить его с помощью take(1)

 canActivate(): Observable<boolean>{
    return this.accountService.currentUser$.pipe(
      map((user:User)=>{
        // add the logic
      }),
      take(1)
    )
  }