Есть ли проблема с показом токена API в источнике? (Laravel + Vue. js)

Question

Моя ситуация такова, что я хочу выполнить запрос API на внешнем интерфейсе (используя ax ios). Запрос API требует добавления токена API в заголовок запроса. И я хочу безопасно хранить токен API, но я не знаю, как безопасно хранить токен API. Я просто прикидываю путь ниже, и все работает хорошо. Тем не менее, я боюсь, что при этом произойдет какое-либо нарушение безопасности.

Допустим, я получаю токен API путем регенерации и сохранения в переменной.

в

user-script.blade. php

     var vm = new Vue({
        el: "#api",
        name: "api_token",
        data: () => ({
            api_token: '{!! \Illuminate\Support\Facades\Auth::check() ? \Illuminate\Support\Facades\Auth::user()->createToken('ApiToken')->accessToken : 'null' !!}',
            devices: {}
        }),
        mounted() {
            axios.get('/api/device',
                {
                    headers: {
                        Authorization: "Bearer "+this.api_token
                    }
                }
            )
            .then((response) => {
                this.devices = response.data;
            })
            .catch((error) => {
                console.log(error);
            })
        }
    })
</script>

Однако api_token будет показан в источнике devtool. источник devtool

1. Есть ли какое-либо нарушение безопасности, если я покажу это пользователям?
2. Есть ли какое-либо нарушение безопасности, если я сохраню пользовательский api-токен в база данных?
3. Или как получить токен API после того, как я уже вошел в систему?

Answer 1

На стороне клиента вы не можете предотвратить изменение кода. Любой пользователь может просмотреть ваш исходный код всех ваших JavaScript файлов.

Если вы заботитесь о безопасности, прочитайте материал, связанный с веб-уязвимостями, такими как X CC, CSRF.