JHipster-5 (AngularJS ile frontend tarafında yetki kontrolü)

Merhaba,
bu yazımda sizlere JHipster ile oluşturduğunuz monolitik projelerde angularJS ile frontend tarafında role kontrolünün nasıl yapılacağını palaşcağım.

Aslında angularJS bilenler için işlem çok tanıdık gelecektir. Her nekadar JHipster projesi desekte içinde springboot ve angularJs implementasyonu yapılmış bir yapı kastedilmektedir.

frontend tarafında erişim kontrolü örneği için projedeki anasayfaya bir mesaj yazdırılacaktır. Eğer kullanıcı admin ise mesaj ekranda görüntülenecektir. Admin değilse gizlenecektir.

ilk olarak gösterilecek mesajı projedeki lokalizasyon dosyası içine ekleyin.
./src/main/webapp/i18n/en/home.json dosyasına giderek
home.titleAdmin karşılığına aşağıdaki içeriği ekleyin

"Welcome, Java Hipster ADMIN!"

son hali aşağıdaki gibi olmaldıır.

{ "home": { "title": "Welcome, Java Hipster!", "titleAdmin": "Welcome, Java Hipster ADMIN!", "subtitle": "This is your homepage", "logged": { "message": "You are logged in as user \"{{username}}\"." },...

ikinci ve son olarak  ./src/main/webapp/app/home/home.component.html dosyasına giderek <h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1> satırının altına aşağıdaki satırı ekleyin.

<h1 *jhiHasAnyAuthority="'ROLE_ADMIN'" class="display-4" jhiTranslate="home.titleAdmin"></h1>

 son hali aşağıdaki gibi olacaktır.

<h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1> <h1 *jhiHasAnyAuthority="'ROLE_ADMIN'" class="display-4" jhiTranslate="home.titleAdmin"></h1>

NOT: Bu dosya üzerinde <div [ngSwitch]="isAuthenticated()"> şeklinde tanımlana bir div bulunmaktadır. Bu div'in içeriği de yine sadece authanticated kullanıcılar için görünür olacaktır.

Browser üzerinde http://localhost:9000/ adresine girerek hem giriş yapmadan hem de giriş yaparak aradaki farkı inceleyebilirsiniz.

kaynak : https://github.com/Tonterias/JhipsterPress