使用 Laravel 和 Inertia 在 Vue 中定义用户 session 数据的最佳方法

Question

我正在使用 Laravel、Vue 和 Inertia 开发一个带有动态菜单的应用程序。

为了传递 session 有关菜单（应显示哪些项目、图标等）和用户数据（头像和名称）的信息，实际上我使用了HandleInertiaRequests中间件。

但是，通过这种方式，所有信息都会在每个 Inertia 请求中发送，我相信这远非完美。

那么，是否有某种策略允许在登录时只发送一次 session 信息？

Answer 1

在这种情况下，我将从MasterLayout.vue将用户详细信息存储在vuex中。 只有在用户登录后才能mounted布局。

在MasterLayout.vue中；

<template>
  ...
</template>

<script>
...
mounted() {
 this.$store.dispatch("setUser");
}
</script>

现在，在auth.js中；

export const auth = {
state: () => ({
    user: [],
}),

actions: {
    setUser({ commit }) {
        commit("SET_USER");
    },
},

mutations: {
    async SET_USER(state) {
        await axios
            .get(route("user"))
            .then((response) => {
                state.user = response.data;
            })
            .catch((error) => {
                console.log(error);
            });
    },
},

getters: {
    auth(state) {
        return state.user;
    },
  },
};

现在，在Avatar.vue组件中；

  <template>
    //do anything with data
    {{auth.name}}
    {{auth.email}}
  </template>

  <script>
    computed: {
     ...mapGetters(["auth"]),
    },
  </script>