앞서 이미지 다루기를 했고(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에 넣어준다.
실행시켜서, 새로운 게시글을 작성해보면 작성자에 현재 로그인 한 유저의 이름이 보여짐을 알 수 있다.
이제 DB에 저장된 writer와 현재 로그인 한 유저의 정보를 비교하여, 현재 로그인 한 유저가 admin이거나, writer와 같다면, view/edit/delete를 모두 할 수 있게, 아니라면 view만 할 수 있게 버튼을 숨겨보려고 한다.
프론트에서 현재 유저값을 받아오기 위해, 컴포넌트에 새로운 메소드를 추가해주겠다.
내가 만들어 준, getCurrentUser라는 메소드를 ngOnInit에 실행하고, userService에도 getCurrentUser라는 메소드를 임의로 만들어줘서 연결할 것이다. Http 통신으로 현재 로그인 한 유저 이름을 받아와서 currentUser라는 로컬 value에 넣어준다.
그럼 service파일을 보겠다. 로그인 되어 있는 유저의 이름은 string이므로 string으로 받아주고, http get요청으로 api/users/currentUser로 연결요청을 보낸다. 이 요청은 UserResource로 도착한다.
기존의 UserResource에 현재 로그인 한 유저의 정보를 알아내는 기능을 추가하였다. 앞서 DB에 저장할 때와 마찬가지고 SecurityUtils.getCurrentUserLogin()
을 사용한다. 이때 값은 Optional이므로 Optional로 받고, 리턴 해준다.
이 과정을 걸쳐 현재 로그인 한 유저의 이름이 컴포넌트에 도착하고, 컴포넌트의 로컬 value인 currentUser에 그 값을 넣어준다.
이 값을 html에서 사용해서 조건 비교를 하여 admin이거나 writer와 현재 로그인 유저 정보를 비교하여 같으면, edit/delete 버튼을 보여주고, 그 외의 경우에는 버튼을 숨겨준다. *ngIf를 사용하여 바로 비교한다.
실행시켜보면, user로 로그인 해 보면 아래와 같이 잘 된다.