FE_occupationlab_server/src/layouts/home/index.vue

<template>
    <div class="main">
        <v-head></v-head>
        <div class="layout">
            <navbar></navbar>
            <div class="content">
                <transition name="move" mode="out-in">
                    <router-view class="view"></router-view>
                </transition>
                <el-backtop target=".content"></el-backtop>
            </div>
            <v-footer ref="footer"></v-footer>
        </div>
    </div>
</template>

<script>
import vHead from '../header'
import navbar from '../navbar'
import vFooter from '../footer'
import { mapState, mapActions } from 'vuex'
import util from '@/libs/util'
import Setting from '@/setting'
export default {
    data() {
        return {
            
        };
    },
    components: {
        vHead,
        navbar,
        vFooter
    },
    mounted() {
        this.autoLogout()
    },
    methods: {
        ...mapActions('user', [
            'logout'
        ]),
        // 长时间未操作,自动退出登录
        autoLogout(){
            let lastTime = new Date().getTime()
            document.onmousedown = () => {
                lastTime = new Date().getTime()
            }
            
            setInterval(() => {
                if(util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime){
                    util.errorMsg('用户登录过期，请重新登录')
                    setTimeout(this.logout,1500)
                }
            },1000)
        }
    }
};
</script>
<style lang="scss" scoped>
    .main{
        min-height: 100%;
        .content{
            min-height: calc(100vh - 176px);
            padding: 24px 24px 0;
        }
    }
</style>