Vuejs SPA의 프론트 엔드를 보호하려면 어떻게 해야 합니까?

Vuejs SPA의 프론트 엔드를 보호하려면 어떻게 해야 합니까?

Vuejs를 사용하여 SPA를 구축하고 Laravel API를 사용하고 있으며 사용자는 여러 역할을 수행할 수 있습니다. 토큰 및 사용자 역할을 저장하는 가장 좋은 방법은 무엇입니까?또, 유저가 그 역할이 무엇인지 알 수 없게 할 수 있습니까?

제가 아직 알고 있는 솔루션은 쿠키와 로컬 스토리지에 저장하는 것입니다.단, 역할의 LocalStorage 키를 알고 있는 사용자가 일반 사용자처럼 변경하여 관리 대시보드(프런트 엔드만)와 관리자가 앱에서 볼 수 있는 내용을 볼 수 있는 경우.

어떻게 하면 예방할 수 있을까요?또 SPA를 보호하는 가장 좋은 방법은 무엇입니까?

잘 부탁드립니다.

SPA 프런트엔드는 '시큐어'로 간주할 수 없습니다.브라우저에서 어떤 것이 실행되면 사용자가 수정할 수 있음을 의미합니다.물론 SPA가 나쁘다는 것은 아닙니다.아니오, 모든 프로젝트에 적합한 솔루션은 아닙니다.사용자에게 관리 대시보드를 표시하지 않도록 하려면 별도의 번들 또는 더 나은 프로젝트(별도의 프로젝트)로 해야 합니다.

대신 SPA를 SSR로 이행하는 것을 검토해 주십시오(Vue에서는 Nuxt.js(https://nuxtjs.org/)를 사용할 수 있습니다).이 사용자에 대한 감사 응답은 (Larabel with Blade와 마찬가지로) HTML 응답만 받습니다.이 때문에, 유저가 컨텐츠를 수신하기 전에, 유저를 인증해, 롤을 체크할 수 있습니다(또, 이것에 의해서 admin 패널에의 액세스를 차단할 수도 있습니다).

단, 같은 프로젝트에서 Larabel을 Vue와 함께 사용하는 경우(Vue는 Blade에 의해 시작됨)는 Nuxt 체크 사용자와 마찬가지로 콘텐츠를 수신할 수 있음을 의미합니다.그냥 미들웨어를 만들어.다만, 페이지 전체를 차단하는 것만으로 도움이 됩니다.단, 복수의 역할에 근거해, 1 페이지의 컨텐츠의 변경(안전한 방법)에는 도움이 되지 않습니다.다시 말씀드리지만 SSR이 필요합니다.

모든 솔루션에 대해 Laravel - Sanctum(https://laravel.com/docs/7.x/sanctum))의 새로운 공식 라이브러리를 사용할 것을 제안합니다.

Laravel API 사용 역할과 사용자 확인을 위한 권한으로 작업을 수행할 수 있습니다.

클라이언트는 jwt 토큰을 저장하고 jwt를 사용하여 Laravel API를 인증합니다.사용자 정보는 larabel 측에서 얻을 수 있습니다.역할 테이블에서 사용자 ID 확인을 사용합니다.

언급URL : https://stackoverflow.com/questions/61130424/how-can-i-secure-front-end-in-a-vuejs-spa