Merhaba, Angular uygulamamızda tanımladığımız rotalardan bazılarına kullanıcı girişi yapılmadan görüntülenmesin isteriz. Rota tanımlaması yaparken canActivate özelliği yardımıyla bu isteğimizi yapabiliyoruz. canActivate özelliğine bir guard tanımlıyoruz ve bu guard içerisinde kullanıcı girişi yapılıp yapılmaması gibi kontrolleri yaparak true ya da false değer döndürüyoruz. Dönen değer true ise component açılıyor, false ise guard tarafından giriş sayfasına yönlendirebiliriz.


Uzatmadan nasıl yapılacağına geçelim,


İlk olarak bir kullanıcının kayıt, giriş, giriş yapıp yapmadığını kontrol edeceğimiz methodları vb. oluşturmak için bir servis oluşturalım.

ng g services/account

spec dosyasını istemiyorsanız --spec false yazabilirsiniz.


Şimdi bu servis dosyasını aşağıdaki gibi düzenleyelim;

import {Inject, Injectable} from '@angular/core';
import {Router} from '@angular/router';


@Injectable({
  providedIn: 'root'
})
export class AccountService {


  constructor(
    private router: Router,
  ) { }


  isLoggedIn(): boolean {
    const token = localStorage.getItem('token');
    if (token) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

}

isLoggedIn methodunda localStorage'de token var mı diye bakıyoruz eğer varsa true, yoksa /login sayfasına yönlendiriyoruz. Buradaki kontrol en basit anlamda bir token kontrolü, localStorage içinde elinizle token yazıp rastgele bir değer verseniz bile true dönecektir bu yüzden güvenli bir yöntem değil. Siz burada token varsa o token değerinin doğruluğunu kontrol edeceğiniz bir api yazıp oradan da onaylanırsa true döndürmeniz daha doğru olacaktır. Ben örneğimizde basit olması için bu şekilde yapıyorum.


Kontrolü yapacağımız methodu hazırladığımıza göre şimdi aşağıdaki komut ile bir guard oluşturuyoruz;

ng g guard auth


Oluşturduğumuz dosyaya gelelim ve şu şekilde düzenleyelim;

auth.guard.ts;

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import {AccountService} from './account.service';
	

@Injectable()
export class AuthGuard implements CanActivate {
	

	constructor(private accountService: AccountService) {}

	canActivate() {
	  return this.accountService.isLoggedIn();
	}
}


Şimdi app-routing.module.ts dosyamıza gelelim ve giriş yapmadan açılmasını istemediğimiz rotaları tanımlayalım;

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'account',
    component: AccountComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent }
    ]
  },
  { path: 'posts', component: PostComponent, canActivate: [AuthGuard] },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', component: SummaryComponent },
      {
        path: 'settings',
        component: SettingsComponent,
        children: [
          { path: '', component: GeneralSettingsComponent },
          { path: 'general', component: GeneralSettingsComponent },
          { path: 'contact', component: ContactInformationComponent },
        ]
      },
      { path: 'categories', component: CategoriesComponent }
    ]
  }
];

İç içe rotalardan oluşmuş bir örnekle bunu yapmak istedim. Bu örneğe göre aşağıdaki componentler AuthGuard kontrolünden geçecek;

  • PostComponent
  • DashboardComponent (bu componentin children'ı olarak tanımlı tüm componentler dahil)



Umarım faydalı bir yazı olmuştur.