https://github.com/PanJiaChen/vue-element-admin

저는 vue로 개발할 때 위 오픈소스 많이 참조 했는데요

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/router/index.js

라우터에 meta 값을 넣어서

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js

이런식으로 권한 처리를 했습니다

@vicodin

스크립트로 체크한다는건 페이지가 보여지고, 스크립트에서 서버와 통신해서 체크하란 뜻인가요?

@제주감자

감사합니다.

로그인시 role 을 스토어에 저장하고 

router 이동시 그 정보를 체크하는 방식인가요?

서버와 통신하란 이야기는 아니었고 처음 인증할떄 권한값을 받아와서 라우터나 해당페이지에서 체크하는게 좋을거같다는 이야기였습니다. 전역상수같은걸로 값을 가지고 클라이언트단에서 체크를 하는거죠.

질문이 단순히 서버단 데이터요청처리는 권한체크를 하는데 화면단에서 SPA라 페이지이동은 되어버린다고 하시는거면요.

role 체크는 초기 한 번만 하면 됩니다. 제가 제주감자님 소스로 비슷한 환경으로 실제 프로젝트 투입 중인데, role 정보를 초기에 로그인 정보와 같이 store 에 저장 후 라우터에서는 로그인 체크만 합니다.

권한 체크는 매 접근 시 굳이 할 필요가 없는 게, router 에서 처음부터 role 별로 걸러내는 소스를 볼 수 있습니다. 즉, 이후에는 로그인만 체크하고 로그인만 유효하면 필터링된 라우팅 정보로 접근한다는 거죠.

저는 이를 활용해서 서버단에서 걸러내는 로직을 구현했습니다. 물론 전체 라우팅 정보는 vue에 어쩔 수 없이 존재해야 합니다. 전체에서 필터링을 거는 식이니까요. 어자피 라우팅 데이터가 import 구문 때문에 Webpack 트랜스코딩 데이터이다 보니 분석도 어렵고, 악의적 사용자가 어렵게 억지로 접근한다 해도 API에서 로그인 체크만 해도 안전하게 앱을 구성할 수 있습니다.

@컴포지트 @sinaly

저도 컴포지트님이 말씀하신대로 구현했습니다.

위에 깃헙 코드도 컴포지트님이 말씀하신 대로 입니다.