如果用户在 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

我找不到任何例子:(

原文由 Jquestions 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 您可以在应用程序中使用它来检查用户当前是否登录。

例如：

原文由 Julian Paolo Dayag 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 axios 拦截器。您拦截拒绝访问的 http 响应代码，然后采取相应措施。

 window.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (419 === error.response.status) {
         location.reload();
    } else {
        //Something else you want to do or do nothing
    }
});

原文由 Nensi601 发布，翻译遵循 CC BY-SA 4.0 许可协议