Infinity Preloader AdminLTE3 VueJS 和 laravel-sanctum

Question

我使用：浏览器 2 Laravel 8 幼虫 Sanctum Laravel 混合并想在进入页面之前检查身份验证，但使用 AdminLTE3 Preloader 预加载器冻结且网站未加载 Vuex 商店：

const store = new Vuex.Store({
    state:{
        user: false,
        isCheckedAuth: false
    },
    mutations:{
        auth(state, payload){
            state.user=payload;
            state.isCheckedAuth = true;
        }
    },
    getters:{
        isAuth(state){
            if(!state.user) return false; else return true;
        },
        getNameInitials(state){
            return `${state.user.last_name} ${state.user.first_name[0]}. ${state.user.middle_name[0]}.`;
        },
        hasPermission(state){
            return function (needPermission){
                if(state.user.permissions.find(permission => permission === needPermission))
                    return true;
                else
                    return false;
            }
        },
        isCheckedAuth(state){
            return state.isCheckedAuth;
        }
    },
    actions:{
        async checkAuth(){
            return await axios.get('/api/v.1.0/user').then(r=>{
                store.commit('auth',r.data.data)
            })
        }
    }
})

Vue 实例：

const VueInstance = ()=>{
    new Vue({
        el: "#app",
        router,
        store,
        components: { App }
    })
}
store.dispatch('checkAuth').then(() => {
    VueInstance();
}).catch(() => {
    VueInstance();
})

如果我改成

new Vue({
        el: "#app",
        router,
        store,
        components: { App }
    })

，它正在运行，但我无法在进入页面之前检查身份验证

Answer 1

我做点别的。我添加到 Vuex 属性 isCheckerAuth 并将观察者添加到需要检查身份验证的组件。我还安装了方法并在其上检查 isChecked true 或 false 在 Vuex 中：

const store = new Vuex.Store({
    state:{
        user: false,
        isCheckedAuth: false
    },
    getters:{
        isAuth(state){
            if(!state.user) return false; else return true;
        },
        isCheckedAuth(state){
            return state.isCheckedAuth;
        },
    }
})

在组件中：

<template>
    <!--you need to add some loading screen when isLoading-->
</template>

<script>
export default {
    data() {
        return {
            isLoading: true
        }
    },
    watch:{
        "$store.getters.isCheckedAuth"(){
            if(this.$store.getters.isAuth)
                this.isLoading = false;
            else
                this.$router.push({name:'home'});
        }
    },
    mounted() {
        if(this.$store.getters.isCheckedAuth&&(!this.$store.getters.isAuth)
            this.$router.push({name:'home'});
        else if(this.$store.getters.isCheckedAuth)
            this.isLoading = false
    }
}
</script>

<style scoped>
</style>

Infinity Preloader AdminLTE3 VueJS 和 laravel-sanctum

Infinity Preloader AdminLTE3 VueJS and laravel-sanctum

laravel

vue.js

vuejs2

vuex

laravel-sanctum