Vue/Inertia.js中如何从布局组件访问共享的用户认证数据

嘿，我来帮你搞定这个问题！看起来你已经通过Inertia的官方方法共享了用户认证数据，但布局组件拿不到的问题，大概率是因为数据传递的链路断了，或者非Inertia直接渲染的页面没拿到全局共享的数据。我给你几个可行的解决方案：

1. 先确认全局共享数据的配置是否正确 #

首先得确保你在HandleInertiaRequests中间件里已经正确共享了auth数据，这是所有操作的基础。打开app/Http/Middleware/HandleInertiaRequests.php，检查share方法是不是这样写的：

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user() ? $request->user()->only('id', 'name', 'email') : null,
        ],
    ]);
}

这个配置会把用户数据全局共享给所有Inertia渲染的页面。

2. 让页面组件把auth数据传递给布局组件 #

如果你的页面组件（比如Index.vue）没有把Inertia传递过来的auth props传给Master布局，那布局自然拿不到数据。修改你的页面组件：

<template>
  <!-- 把auth prop传递给Master组件 -->
  <Master :auth="auth">
    <!-- 页面内容 -->
  </Master>
</template>

<script>
import Master from '@/Layouts/Master.vue';

export default {
  components: { Master },
  // 先让页面组件接收Inertia传来的auth prop
  props: {
    auth: Object,
  },
};
</script>

这样Master组件就能通过props拿到auth数据了。

3. 用Inertia的usePage钩子直接获取（更推荐） #

其实不用通过props层层传递，布局组件可以直接用Inertia提供的usePage钩子全局获取共享数据，这样不管页面组件有没有传递props，布局都能拿到。修改你的Master.vue组件：

<template>
  <Head>
    <title>My Title</title>
  </Head>
  <Header :user="user"/>
  <slot/>
  <Footer/>
</template>

<script>
import Header from './Header';
import Footer from './Footer';
import {Head, usePage} from '@inertiajs/inertia-vue3';

export default {
  setup() {
    // 用usePage获取全局共享的页面数据
    const page = usePage();
    return {
      user: page.value.props.auth.user,
    };
  },
  components: {
    Header,
    Footer,
    Head,
  }
}
</script>

这种方式更简洁，也避免了props传递的麻烦，特别适合布局这类全局组件。

4. 处理非Inertia直接渲染的页面 #

如果那些无法获取数据的页面是Laravel的普通Blade视图（不是通过Inertia::render()返回的），你需要手动把auth数据注入到Vue的全局变量里：

在对应的Blade视图中添加这段代码：

<script>
window.inertiaSharedData = {
  auth: {
    user: {!! json_encode(Auth::user() ? Auth::user()->only('id', 'name', 'email') : null) !!}
  }
};
</script>

然后在Master.vue里可以这样兼容：

<script>
import Header from './Header';
import Footer from './Footer';
import {Head, usePage} from '@inertiajs/inertia-vue3';

export default {
  setup() {
    const page = usePage();
    // 优先用Inertia的共享数据，没有的话用全局变量
    const user = page.value.props.auth?.user || window.inertiaSharedData?.auth?.user;
    return { user };
  },
  components: {
    Header,
    Footer,
    Head,
  }
}
</script>

这样不管是Inertia直接渲染的页面，还是普通Blade视图里的Vue组件，你的Master布局都能拿到用户认证数据啦！

备注：内容来源于stack exchange，提问作者Ramin Javi