FE_occupationlab_client/src/layouts/home/index.vue

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

<script>
import { mapState, mapActions } from "vuex";
import util from "@/libs/util";
import Setting from "@/setting";
import vHead from "../header";
import vFooter from "../footer";

export default {
    data() {
        return {
            
        };
    },
    components: {
        vHead,
        vFooter
    },
    computed: {},
    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: calc(100% - 64px);
    .layout{
        padding-top: 64px;
    }
    .index{
        padding: 0;
    }
}
</style>