Как передать объект из Laravel в Vue без использования реквизита

Question

Я настраиваю некоторые компоненты Vue в своем приложении Laravel 5.8, для которых требуется информация о пользователе, доступная через Auth::user(), что наиболее важно, api_token, который я должен использовать в своих запросах axios. Я хочу передать объект Auth::user() из Laravel в Vue безопасным и закрытым способом.

Я изначально передал объект как реквизит, но я не хочу, чтобы личная информация об объекте была легко раскрыта с помощью расширений браузера, таких как Vue DevTools. Теперь я искал способ определения глобальных переменных внутри шаблона Blade и доступа к ним в Vue:

Передача данных от блейда к компоненту vue

https://forum.vuejs.org/t/accessing-global-variables-from-single-file-vue-component/638

https://zaengle.com/blog/layers-of-a-laravel-vue-application

Исходя из этих ссылок выше, мне кажется, что мне нужно установить переменные для объекта окна, но я не уверен, что я делаю что-то не так, чтобы добиться этого. Когда я определяю переменную в шаблоне Blade, я вижу, что переменная назначается правильно, выполняя console.log(), но проблема возникает, когда я пытаюсь использовать ее в Vue.

app.blade.php

@if(Auth::user())
    <script>
        window.User = {!! json_encode(Auth::user()) !!}
        console.log(window.User)
    </script>
@endif

component.vue

<script>
export default {
    data: function() {
        return {
            user: window.User
        }
    }
}
</script>

Я попытался установить данные как window.User, this.User и просто просто User, но они всегда отображаются как undefined. Что мне не хватает? Или есть другой / лучший способ сделать это?

Answer 1

Попробуйте следующий компонент Vue:

<template></template>

<script>
    export default {
        data: function() {
            return {
                user: window.User
            }
        },
        created(){
            console.log(this.user)

        },
    }
</script>

Я мог видеть пользовательские данные из console.log в компоненте Vue.