VueJS异步方法返回Promise而非布尔值的问题修复求助

问题根源 #

async 方法本质上会返回一个Promise对象，你在模板的v-if里直接调用user_check()，拿到的是Promise而非布尔值，自然没法正确判断显示逻辑。

解决办法 #

不要在模板里直接调用异步方法，改用一个响应式数据存储用户登录状态，在组件初始化时异步更新这个状态，模板仅基于该数据做判断即可。

具体修改步骤

1. 在data中新增布尔类型的响应式变量isUserLoggedIn，初始值设为false
2. 在组件created生命周期钩子中调用异步方法，将结果赋值给isUserLoggedIn
3. 修改模板v-if判断，直接使用isUserLoggedIn变量
4. 简化populate_user里的冗余判断逻辑

修改后的完整代码 #

<template>
    <NavbarComponent></NavbarComponent>
    
    <div v-if="!isUserLoggedIn">
        User need to sign-up
    </div>
    
    <FooterComponent></FooterComponent>
</template>

<script>
import router from '../router.js';
import NavbarComponent from '../components/NavbarComponent.vue';
import FooterComponent from '../components/FooterComponent.vue';

//import axios from 'axios';

export default {
    name: 'HomeView',

    components: {
        NavbarComponent,
        FooterComponent,
    },

    data(){
        return {
            companies_list: [],
            user_data: null,
            isUserLoggedIn: false // 新增响应式状态
        }
    },

    created() {
        // 组件初始化时异步更新用户状态
        this.checkUserStatus();
    },

    methods: {
        redirect_to_login_page(){
            router.push('/login');
        },

        redirect_to_home_page(){
            router.push('/')
        },

        populate_user(){
            // 简化判断逻辑：token存在则返回true
            if (localStorage.getItem('token')){
                localStorage.setItem('user_data', 'user infos here');
                this.user_data = 'user infos here';
                return true;
            }
            return false;
        },

        async checkUserStatus() {
            try {
                const is_user_populated = await this.populate_user();
                this.isUserLoggedIn = is_user_populated;
            } catch (error) {
                this.isUserLoggedIn = false;
            }
        }
    },
}
</script>

补充说明 #

• 把原user_check改名为checkUserStatus更贴合语义，它的作用变为更新组件响应式状态，而非直接返回值
• 模板中!isUserLoggedIn替代原判断逻辑，可读性更强
• 后续若需重新验证用户状态（比如登录/登出后），直接调用checkUserStatus()即可自动更新视图

内容的提问来源于stack exchange，提问作者Victor Moraes