Laravel 10向Vue3 Composition API传递登录用户名问题求助

你拿到的loggedUser是JSON格式的字符串，不是JavaScript对象，所以没法直接用.语法提取用户名。Laravel中直接输出Auth::user()时，框架会自动把对象序列化为JSON字符串，传到前端后还是字符串类型，必须先转成JS对象才能访问属性。

方法一：Laravel端直接传递用户名（推荐） #

如果只需要用户名，没必要传整个用户对象，直接在meta标签里输出用户名即可：

<!-- app.blade.php -->
<meta name="user-name" content="{{ Auth::user()->name }}">

然后在Vue里直接获取使用：

<!-- index.vue -->
{{ loggedUserName }}

<script setup>
import useCompanies from "@/composables/companies";
import { onMounted } from "vue";

const loggedUserName = document.querySelector("meta[name='user-name']").getAttribute('content')
</script>

方法二：Vue端解析JSON字符串获取用户名 #

如果需要保留完整用户信息，就把拿到的JSON字符串解析成JS对象：

<!-- index.vue -->
{{ loggedUser.name }}

<script setup>
import useCompanies from "@/composables/companies";
import { onMounted, ref } from "vue";

// 用响应式变量存储用户信息
const loggedUser = ref({});

onMounted(() => {
  const userStr = document.querySelector("meta[name='user']").getAttribute('content');
  // 处理用户未登录的情况，避免JSON.parse报错
  if (userStr) {
    loggedUser.value = JSON.parse(userStr);
  }
})
</script>

注意要加判断：如果用户未登录，Auth::user()会返回null，这时meta标签的content为空，直接解析会报错，所以要先检查字符串是否存在。

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