app-user.vue

<template>
    <div class='app-header-user'>
        <dropdown @on-click="userSelect" :transfer="true">
            <div class='user'>
                <span>{{user.name ? user.name : $t('user.name')}}</span>
                &nbsp;&nbsp;<avatar :src="user.avatar" />
            </div>
            <dropdown-menu class='menu' slot='list' style='font-size: 15px !important;'>
                <dropdown-item name='logout' style='font-size: 15px !important;'>
                    <span><i aria-hidden='true' class='fa fa-cogs' style='margin-right: 8px;'></i></span>
                    <span>{{$t('user.logout')}}</span>
                </dropdown-item>
            </dropdown-menu>
        </dropdown>
    </div>
</template>
<script lang = 'ts'>
import { Vue, Component } from 'vue-property-decorator';

@Component({
    i18n: {
        messages: {
            'zh-CN': {
                user: {
                    name: '系统管理员',
                    logout: '退出登陆',
                    surelogout: '确认要退出登陆？',
                }
            },
            'en-US': {
                user: {
                    name: 'System',
                    logout: 'Logout',
                    surelogout: 'Are you sure logout?',
                }
            }
        }
    }
})
export default class AppUser extends Vue {

    /**
     * 用户信息 
     *
     * @memberof AppUser
     */
    public user = {
        name: '',
        avatar: './assets/img/avatar.png',
    }

    /**
     * 下拉选选中回调
     *
     * @param {*} data
     * @memberof AppUser
     */
    public userSelect(data: any) {
        if (Object.is(data, 'logout')) {
            const title: any = this.$t('user.surelogout');
            this.$Modal.confirm({
                title: title,
                onOk: () => {
                    this.logout();
                }
            });
        }
    }

    /**
     * vue  生命周期
     *
     * @memberof AppUser
     */
    public mounted() {
        let _user:any = {};
        if(this.$store.getters.getAppData()){
            if(this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfusername){
                _user.name = this.$store.getters.getAppData().context.srfusername;
            }
            if(this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfusericonpath){
                _user.avatar = this.$store.getters.getAppData().context.srfusericonpath;
            }
        }
        Object.assign(this.user,_user,{
            time: +new Date
        });
    }

    /**
     * 退出登录
     *
     * @memberof AppUser
     */
    public logout() {
        localStorage.removeItem('user');
        localStorage.removeItem('token');
        this.$router.push({ name: 'login' });
    }
}
</script>

<style lang="less">
@import './app-user.less';
</style>