Angular canActivate Kullanımı (Guard)

canActivate Guard nedir?

canActivate Guard bizim yetki veya sayfa açılmadan önce herhangi bir etkinlik/olayın kontrolünü yapabileceğimiz bir ortam hazırlamaktadır. Dört farklı ( CanActivate; CanActivateChild; CanDeactivate; CanLoad ) terimimiz olsa da ben sizlere CanActive üzerinden kendi kullanımımı göstereceğim.

canActivate Döngü (loop) sorunu

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

Kullanmanızı önermiyorum! (I think it should be removed from use )

Üst tarafa if yapınızda else if veya else kullandığınız zaman Guard maaleef ki döngüye giriyor ve projeniz patlıyor.

Çareyi Promise kullanmakta buldum.

canActivate kullanımı

logedding.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable({
  providedIn: 'root'
})
export class LogeddinGuard implements CanActivate {

  private second = 3 * 1000;

  constructor(
    public authService: AuthService,
    public router: Router,
    public snackBar: MatSnackBar
  ) { }

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return this.defaultGuardControl()
      .then(() => {
        return true;
      })
      .catch((err) => {
        return false;
      });
  }


  defaultGuardControl(): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (this.authService.isMailVerified === true) {
        this.router.navigate(['email-adresi-onayla']);
        this.snackBar.open('Mail adresinizi onaylayınız!', 'Tamam', { duration: this.second });
        reject(false);
      } else if (this.authService.isLoggedIn === true) {
        this.router.navigate(['anasayfa']);
        this.snackBar.open('Giriş yapan kullanıcılar bu sayfayı göremez!', 'Tamam', { duration: this.second });
        reject(false);
      }
      resolve(true);
    });
  }

}

canActivate return veya false aldığı zaman ne tepki verdiğini henüz tam olarak keşfedemediğim için resolve ve reject içerisinde gönderdiğim true ve false değerleri sizi yanıltmasın. Birden fazla kontrol yapmanız gerekiyorsa, örneğin bir kullanıcı giriş yapmış fakat mail adresini doğrulamamış (üstteki kodda örneği mevcut) bunun kontrolünü yapabilir ve router ile kolayca yönlendirebiliriz.

member-route.module.ts

const routes: Routes = [
    {
        path: 'giris-yap',
        component: LoginComponent,
        canActivate: [LogeddinGuard]
    },
    {
        path: 'kayit-ol',
        component: RegisterComponent,
        canActivate: [LogeddinGuard]
    },
    {
        path: 'email-adresi-onayla',
        component: VerifyEmailComponent,
        data: { breadcrumb: 'menu.dersler' }
    },
];
@NgModule({
    declarations: [
        LoginComponent,
        RegisterComponent,
        VerifyEmailComponent,
    ],
    imports: [
        RouterModule.forChild(routes),
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        MaterialModule
    ],
    exports: [
        LoginComponent,
        RegisterComponent,
        VerifyEmailComponent,
        MaterialModule
    ],
})
export class MemberModule { }

Tek bir Guard ile istediğimiz kontrolleri yapabiliyoruz 🙂

Mail doğrulamamış ise

Mail doğrulamış ve kayit-ol sayfasına girmeye çalışıyor ise

1 Comment

  1. Gerçekten başarılı bir çalışma. Yazılımcı diye buna derim işte.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir