Laravel项目中如何从Blade直接向Vue实例传递登录用户数据？

嘿，我来给你几个实用的方案，解决把Laravel登录用户数据传给绑定在#root的Vue实例这个问题，这些都是我在实际项目里验证过的方法😉

这种方式上手最快，你只需要在Blade模板里、Vue实例挂载之前，把用户数据挂载到全局window对象上：

<!-- 在你的Blade文件中，#root元素之前添加这段脚本 -->
<script>
// 用toJson()确保数据被正确转义，避免XSS风险
window.currentUser = {!! Auth::user()->toJson() !!};
</script>

<div id="root"></div>

然后在你的Vue实例里，直接读取这个全局变量就行：

const app = Vue.createApp({
  data() {
    return {
      user: window.currentUser
    }
  },
  // 后续就可以在模板里用{{ user.name }}这类方式访问了
}).mount('#root');

注意：这种方法会污染全局作用域，如果你的项目比较复杂，可能会有变量冲突的风险，适合小型项目或者快速验证场景。

这个方法更符合DOM数据传递的最佳实践，不会污染全局，步骤也很简单：

首先在Blade的#root元素上添加data-user属性：

<div id="root" data-user='{{ Auth::user()->toJson() }}'></div>

然后在Vue实例里，你可以在挂载时直接读取这个属性：

// 先获取根元素
const rootEl = document.getElementById('root');
// 解析data属性里的JSON数据
const userData = JSON.parse(rootEl.dataset.user);

const app = Vue.createApp({
  data() {
    return {
      user: userData
    }
  }
}).mount('#root');

或者在Vue的mounted钩子中读取（更符合Vue的生命周期）：

const app = Vue.createApp({
  data() {
    return {
      user: null
    }
  },
  mounted() {
    // this.$el就是挂载的#root元素
    this.user = JSON.parse(this.$el.dataset.user);
  }
}).mount('#root');

我平时更推荐这个方法，既安全又不会乱全局变量，维护起来也清晰。

如果你的用户数据需要后续动态更新，或者你希望通过更安全的认证方式传递，那就可以用API请求的方式：

首先在Laravel的routes/api.php里添加一个获取当前用户的路由：

Route::get('/user', function () {
    // 确保只有登录用户能访问，所以加上auth中间件
    return Auth::user();
})->middleware('auth');

然后在Vue实例的created钩子中发起请求：

const app = Vue.createApp({
  data() {
    return {
      user: null
    }
  },
  async created() {
    try {
      const response = await fetch('/api/user');
      this.user = await response.json();
    } catch (error) {
      console.error('获取用户数据失败:', error);
    }
  }
}).mount('#root');

这个方法的优势是可以随时刷新用户数据，而且通过Laravel的认证中间件保证了数据的安全性，适合中大型项目或者需要动态更新用户信息的场景。

内容的提问来源于stack exchange，提问作者Giesburts