필요사항

앞서 이미지 다루기를 했고(https://velog.io/@max9106/series/JHipster-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%8B%A4%EB%A3%A8%EA%B8%B0), 이어서 이제 작성한 게시물을 작성자만, edit, delete 하는 것을 다루어 보겠다.

작성자 저장

작성자를 DB에 저장해주려면, 게시글을 쓸 때, 로그인 되어 있는 유저의 정보가 필요하다. 그 정보를 가져와, Resource파일에서 이미지를 다룰때 처럼, setter를 이용하여, DTO의 writer값에 넣어주면 된다.

새 게시글을 작성 후, save를 누르면, http post 통신을 하여, Resource파일로 온다. 현재 로그인 되어 있는 유저의 정보를 알기 위해서는, SecurityUtils가 필요하다. SecurityUtils를 import해주고, SecurityUtils.getCurrentUserLogin()으로 현재 로그인 되어있는 유저의 이름을 받아온다. .get()을 끝에 붙여, string으로 만들어준다. string으로 만들어준 후, setter를 이용하여, DTO에 넣어준다.

스크린샷 2019-11-15 오후 4.44.25.png

실행시켜서, 새로운 게시글을 작성해보면 작성자에 현재 로그인 한 유저의 이름이 보여짐을 알 수 있다.

스크린샷 2019-11-15 오후 4.46.22.png

스크린샷 2019-11-15 오후 4.46.33.png

수정, 삭제 권한

이제 DB에 저장된 writer와 현재 로그인 한 유저의 정보를 비교하여, 현재 로그인 한 유저가 admin이거나, writer와 같다면, view/edit/delete를 모두 할 수 있게, 아니라면 view만 할 수 있게 버튼을 숨겨보려고 한다.

프론트에서 현재 유저값을 받아오기 위해, 컴포넌트에 새로운 메소드를 추가해주겠다.

내가 만들어 준, getCurrentUser라는 메소드를 ngOnInit에 실행하고, userService에도 getCurrentUser라는 메소드를 임의로 만들어줘서 연결할 것이다. Http 통신으로 현재 로그인 한 유저 이름을 받아와서 currentUser라는 로컬 value에 넣어준다.
스크린샷 2019-11-15 오후 4.50.24.png

그럼 service파일을 보겠다. 로그인 되어 있는 유저의 이름은 string이므로 string으로 받아주고, http get요청으로 api/users/currentUser로 연결요청을 보낸다. 이 요청은 UserResource로 도착한다.

스크린샷 2019-11-15 오후 4.54.24.png

기존의 UserResource에 현재 로그인 한 유저의 정보를 알아내는 기능을 추가하였다. 앞서 DB에 저장할 때와 마찬가지고 SecurityUtils.getCurrentUserLogin()을 사용한다. 이때 값은 Optional이므로 Optional로 받고, 리턴 해준다.

스크린샷 2019-11-15 오후 4.56.12.png

이 과정을 걸쳐 현재 로그인 한 유저의 이름이 컴포넌트에 도착하고, 컴포넌트의 로컬 value인 currentUser에 그 값을 넣어준다.

스크린샷 2019-11-15 오후 4.59.12.png

이 값을 html에서 사용해서 조건 비교를 하여 admin이거나 writer와 현재 로그인 유저 정보를 비교하여 같으면, edit/delete 버튼을 보여주고, 그 외의 경우에는 버튼을 숨겨준다. *ngIf를 사용하여 바로 비교한다.

스크린샷 2019-11-15 오후 5.03.01.png

실행시켜보면, user로 로그인 해 보면 아래와 같이 잘 된다.

스크린샷 2019-11-15 오후 5.04.23.png