Question

我正在Laravel 5.8应用程序中设置一些Vue组件，这些组件需要通过Auth::user()获得用户信息，最重要的是，我必须在axios请求中使用api_token。我想通过安全且私有的方法将Auth::user()对象从Laravel传递给Vue。

我最初将对象作为道具传递，但我不希望使用诸如Vue DevTools之类的浏览器扩展轻易地公开对象的私人信息。现在，我一直在寻找一种在Blade模板中定义全局变量并在Vue中访问它们的方法：

Pass data from blade to vue component

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

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

基于上面的那些链接，似乎我需要做的就是将变量设置为window对象，但是我不确定要做什么才能实现这一目标。当我在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>

我可以从Vue组件中的console.log中看到用户数据。

如何在不使用道具的情况下将对象从Laravel传递到Vue

1 个答案: