Как я могу защитить Front-End в Vuejs SPA?

Question

Я создаю SPA , используя Vuejs и потребляю Laravel API , и пользователи могут иметь несколько ролей, что является лучшим способом сохранить токен и пользовательские роли? а также помешать пользователям узнать, какие роли есть?

Есть одно решение, которое я знаю, а именно - сохранить их в Cookies и LocalStorage . Однако, если кто-то знает мой LocalStorage key для ролей, и они были просто как обычный пользователь и изменили его, чтобы они могли видеть, как выглядит Admin Dashboard (Просто Front- Конец) и что администратор может видеть в приложении.

Как я могу предотвратить их? и каковы наилучшие способы защиты SPA?

Заранее спасибо.

Answer 1

Вы никогда не можете рассматривать SPA-интерфейс как «безопасный». Если что-то выполняется в браузере, это означает, что оно может быть изменено пользователем. Конечно, это не значит, что SPA - это плохо, нет, просто это не хорошее решение для каждого проекта. Если Вы хотите быть уверены, что пользователь никогда не увидит панель администратора, то она должна быть в отдельном пакете или, что еще лучше, в отдельном проекте.

Вместо этого - рассмотрите возможность миграции SPA в SSR (в Vue Вы можете использовать Nuxt. js (https://nuxtjs.org/) для этого). Благодарность этому пользователю получит только HTML ответ (как и в Laravel с Blade). Благодаря этому Вы можете аутентифицировать пользователя и проверять роли ДО того, как пользователь получит какой-либо контент (и тем самым заблокирует доступ к панели администратора).

НО - если вы используете Laravel с Vue в том же проекте ( поэтому Vue инициируется Blade) это означает, что вы можете просто проверить Nuxt пользователя, прежде чем он получит какой-либо контент. Просто сделайте промежуточное ПО для этого. Но это поможет только путем блокировки всей страницы, а не для изменения (безопасным способом) контента на одной странице на основе нескольких ролей. Итак, еще раз - для этого вам нужен SSR.

Для любого решения я бы предложил вам использовать новую официальную библиотеку из Laravel - Sanctum (https://laravel.com/docs/7.x/sanctum).

Answer 2

Laravel Использование роли API и разрешение на проверку того, что пользователь может что-то сделать.

Клиент сохраняет токен jwt и использует jwt для аутентификации Laravel API. Вы получите информацию о пользователе на laravel стороне. Использовать проверку идентификатора пользователя в таблице ролей.