# 用户模块概述

几乎每个项目中都会有用户登录的功能,本模板结合小程序等各端登录的场景,实现登录逻辑的深度封装。

# 实现思路

将用户信息和token存储在vuex store中,在/common/store/user中提供state:

    token: '',
    info: {}, //用户模块的信息

在/common/mixin/index中,声明全局的变量,便于在页面中调用用户信息。

computed: {
		
    // 全局注入用户信息
    userInfo(){
        return this.$store.state.user.info
    },
    
    // 是否登录
    isLogin(){
        return this.$store.state.user.token
    },
    
},

使用示例:

<view v-if="isLogin">
    {{ userInfo.name }}
</view>
<com-button v-else @click="handleLogin">立即登录</com-button>

<script>

    export default {

        methods: {

            handleLogin(){
                this.$store.dispatch("user/login")
            },

        }

    }

</script>
上次更新时间: 3/10/2023, 6:45:17 PM