rt-sim-training-client/src/App.vue

<template>
  <div id="app">
    <router-view />
    <deomon-topic ref="deomonTopic" />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { getSessionStorage } from '@/utils/auth';
import { loginInfo, ProjectIcon } from '@/scripts/ProjectConfig';
import DeomonTopic from '@/views/demonstration/deomonTopic';
import WindowResizeHandler from '@/mixin/WindowResizeHandler';

export default {
    name: 'App',
    components: {
        DeomonTopic
    },
    mixins: [
        WindowResizeHandler
    ],
    computed: {
        path() {
            return window.location.pathname;
        }
    },
    watch: {
        '$store.state.socket.simulationInvite': function (val) {
            if (val.creator) {
                this.subscribeMessage(val);
            }
        },
        '$store.state.socket.roomInvite': function (val) {
            if (val.creator) {
                this.subscribeMessage(val);
            }
        },
        '$store.state.socket.beLogoutCount': async function(val) {
            this.$store.dispatch('disconnect').then(()=>{
                this.$alert(this.$t('tip.logoutTips'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    callback: action => {
                        this.$store.dispatch('exit').then(resp => {
                            this.$router.push({path: loginInfo[getSessionStorage('project')].loginPath});
                        });
                    }
                });
            });
        }
    },
    created() {
        const project = getSessionStorage('project');
        if (project) {
            document.querySelector("link[rel*='icon']").href = loginInfo[project].linkIcon || ProjectIcon[project];
        }
    },
    mounted() {
        this.prohibitSystemContextMenu();

        window.addEventListener('beforeunload', async e => {
            if (!this.$route.query.noPreLogout) {
                await this.$store.dispatch('preLogout');
            }
        });

        this.$nextTick(() => { this.subscribe(); });
    },
    methods: {
        resizeHandler() {
            this.$store.dispatch('app/resize', { width: this._clientWidth, height: this._clientHeight });
        },
        prohibitSystemContextMenu() {
            window.document.oncontextmenu = function () {
                return false;
            };
        },
        subscribeMessage(res) {
            if (this.$refs.deomonTopic && !window.location.href.includes('trainroom')) {
                if (getSessionStorage('project') != 'refereeJsxt' && getSessionStorage('project') != 'jsxt' && !(getSessionStorage('project').includes('design'))) {
                    this.$refs.deomonTopic.doShow(res);
                }
                this.$store.dispatch('socket/setSimulationInvite');
                this.$store.dispatch('socket/setRoomInvite');
            }
        },
        subscribe() {
            const token = getToken();
            if (token && this.$route.path != '/404' && !this.path.endsWith('login')) {
                const header = { group: '', 'X-Token': token };
                this.$store.dispatch('subscribe', {header, type: getSessionStorage('project')});
            }
        }
    }
};

</script>