如果用户在Laravel中进行了身份验证,如何签入Vue组件？

Question

正如标题所述,我有点困惑,如果用户登录并使用Laravel的Auth外观进行身份验证,我将如何使用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

通常从您的控制器,您将经过身份验证的用户对象传递到视图中,然后将其存储在javascript变量中

控制器:

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

您将知道用户是否在返回对象时进行了身份验证,或者null,其中null表示没有用户通过身份验证.

在您的刀片中,将其分配auth_user到javascript变量中:

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

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

{
    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>

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

例如: