laravel - 如果用户在 Laravel 中通过身份验证，如何 checkin Vue 组件？

Question

如标题所述，我有点困惑如何根据用户是否已登录并使用 Laravel 的 Auth facade 进行身份验证，使用 if/else 语句处理我的 Vue 组件中的方法。我正在发出各种 Axios 请求，我需要根据用户是否登录允许/禁止这些请求。

我有 VUEX 设置，我想我可以使用本地存储以某种方式为 isLoggedin 提供状态，例如与 Laravel 一起使用。但我不知道这是正确的方法还是安全的，并且大概 Laravel 已经存储了它的身份验证。那么我可以直接在 Vue 中访问它吗？

这里有一些我认为不是最好的不干净的解决方案 - https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and-vuejs

我找不到任何例子:(

Answer 1

通常从您的 Controller 中，您将经过身份验证的用户对象传递到 View 中，然后将其存储在 javascript 变量中

Controller :

public function index()
{
    return view('index', [
        'auth_user' => Auth::user()
    ]);
}

如果用户返回一个对象或 null，您将知道该用户是否已通过身份验证，其中 null 表示没有用户经过身份验证。

在你的 blade 中，将 auth_user 分配给一个 javascript 变量:

<script>
    window.auth_user = {!! json_encode($auth_user); !!};
</script>

你的 vuex store 对象至少应该是这样的:

{
    state: {
        user: null
    },
    mutations: {
        setAuthUser(state, user) {
            state.user = user;
        }
    },
    getters: {
        isLoggedIn(state) {
            return state.user !== null;
        }
    }
}

然后在您的 Vue 根组件中，获取 auth_user 并将其保存到商店中:

<script>
    export default {

        mounted() {
            this.$store.commit('setAuthUser', window.auth_user);
        }

    }
</script>

您现在基本上有了一个名为 this.$store.getters.isLoggedIn 的 getter，您可以在您的应用程序中使用它来检查用户当前是否登录。

例如: