Vue를 이용할 때 역할 기반 인증방식에 대한 보안처리

[Haytsir]

Vue를 이용해 웹앱을 제작중입니다.

권한은 역할 기반 권한 인증(Role based permission authentication)방식으로 하고있습니다.

서버에서 DB를 참조해서 어떠한 권한이 있는지 확인하고,

클라이언트 화면에서는 권한에 따라 버튼을 보이거나 숨기는 작용을 하려고 합니다.

근데 여기서 문제가, 서버에서 데이터를 보내주고,

클라이언트에서그 데이터로 조건(if...) 처리해서 보이고 숨기면 하이잭이나 인젝팅 공격에 취약할 것 같아 막막한 상태입니다.

서버측에서 렌더링하려고 해도 서버에 많은 부담을 지게할 수 없는 상황이라 되도록이면 적은 수의 연산만 실행하려고 합니다.

구글에서 찾아보니

https://medium.com/@manojkumar_88220/role-based-authentication-using-vue-js-2-f54e18498019
에서 설명하는 vue-router의 meta 값과, 내비게이션 가드(Navigation Guards)로 권한을 확인하거나,

https://codeburst.io/role-based-authorization-for-your-vue-js-and-nuxt-js-applications-using-vue-kindergarten-fd483e013ec5
에서 설명하는 vue-kindergarten를 통해 인증하는 방식,

두 가지 가이드를 찾을 수 있었습니다만, 아직 이 부분에 대한 배경지식이 제대로 잡히지 않아서인지

여러번 읽어도 위 두 가이드에서 설명하는 원리를 파악하기가 힘듭니다.

혹시 위 방식을 사용해보셨거나, 원리를 알고 계신 분이 계신다면 조언해주시면 정말 감사하겠습니다.

[blackdew]

보내주신 링크들은 대부분 "클라이언트 단에서 role과 권한에 따라 메뉴 혹은 컨텐츠 컨트롤을 어떻게 할 수 있는가"에 대한 내용인 것 같아요. 그래서 접근하는 컨텐츠에 접근할 때에 서버 쪽 router 에서 분기하는 시점이나 혹은 데이터/페이지 를 access 하는 시점에 권한을 체크하여 제한하는 로직을 두어야 합니다.

vue라면 서버쪽에서 데이터를 api로 조회해서 렌더링을 하는 경우가 많으니
api 서버에서 user session이나 token을 사용하여 제한을 걸어주면 될 것 같아요.