UserclassFront/public/code/App.vue

<template>
    <div id="app" v-if="isLogin">
        <layout-old v-if="isLayoutOld" :layoutData="layoutData"></layout-old>
        <layout v-else :layoutData="layoutData"></layout>
        <div :class="['base-wrap-main', layoutData.isAlone ? 'alone-page' : '']">
            <transition v-if="!isNoAuthority" :name="!isBack ? 'fade' : 'back'" :mode="!isBack ? 'out-in' : 'in-out'">
                <router-view v-if="isRouterAlive"></router-view>
            </transition>
            <div v-else class="no-authority-wrap">
                <h3>暂无权限</h3>
                <h6>如需查看，请联络管理员为您分配权限</h6>
            </div>
        </div>
    </div>
</template>

<script>
import layout from "./frame/layout.vue";
import layoutOld from "./frame/layout_old.vue";

const appendLink = (baseHost, name, version) => {
    var headHTML = `<link type="text/css" rel="stylesheet" href="${baseHost}/BschHome/front/css/${name}.css?v=${version}">`;
    $("head:eq(0)").append(headHTML);
};

export default {
    components: { layout, layoutOld },
    name: "app",
    data() {
        return {
            isRouterAlive: true,
            isBack: false,
            isLogin: false,
            isNoAuthority: false,
            layoutData: {},
            isLayoutOld: conf.isLayoutOld,
        };
    },
    provide() {
        return {
            reload: this.reload,
        };
    },
    async created() {
        try {
            const baseHost = window.conf.baseHost,
                ssoHost = window.conf.ssoHost;
            var version = localStorage.getItem("themeVersion") || new Date().getTime();
            appendLink(baseHost, "base.layout", version);
            var info = await this.getUserInfo();
            var bschResult = await this.getBschHomeJsonp(baseHost, info.id);
            this.setCurrentRole(bschResult, baseHost);
            var mod = await this.getUserMod();
            this.layoutInit(info, mod, bschResult.appList, baseHost, ssoHost);
            this.isLogin = true;
        } catch (error) {
            console.error(error);
            this.$Message.error("载入用户信息失败！");
        }
    },
    mounted() {
        var isTrident = navigator.userAgent.indexOf("Trident") > -1; // 是否是IE内核
        if (isTrident) {
            $("html").css("overflow", "hidden");
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => (this.isRouterAlive = true));
        },
        getUserInfo() {
            const _this = this;
            return new Promise((resolve, reject) => {
                _this.$api.get(
                    APIConfig.Base.GetUserInfo,
                    null,
                    resp => {
                        resolve(resp.data);
                    },
                    error => reject(error)
                );
            });
        },
        getUserMod() {
            const _this = this;
            return new Promise((resolve, reject) => {
                _this.$api.get(
                    APIConfig.Base.GetUserMod,
                    null,
                    resp => {
                        resolve(resp.data);
                    },
                    error => reject(error)
                );
            });
        },
        getBschHomeJsonp(baseHost, userId) {
            var version = localStorage.getItem("themeVersion") || new Date().getTime();
            return new Promise((resolve, reject) => {
                var crossStorage,
                    crossUrl = `${baseHost}/BschHome/front/libs/cross`;
                try {
                    var HEAD = document.getElementsByTagName("head")[0];
                    var node = document.createElement("script");
                    node.src = `${crossUrl}/client.js?v=${version}`;
                    node.onload = function () {
                        crossStorage = new Client(`${crossUrl}/middle.html?v=${version}`, () => {
                            crossStorage.getRoteData({ userId }, resp => {
                                resolve(resp);
                            });

                            //分页数据默认条数
                            const customPageCount = localStorage.getItem("customPageCount");
                            crossStorage.getItem("customPageCount", resp => {
                                if (resp == null) return false;
                                if (customPageCount == null) localStorage.setItem("customPageCount", resp);
                                else if (resp != customPageCount) {
                                    crossStorage.setItem({
                                        key: "customPageCount",
                                        value: customPageCount,
                                    });
                                }
                            });
                        });
                    };
                    HEAD.appendChild(node);
                } catch (error) {
                    console.error(error);
                    console.error("获取身份信息失败！");
                    resolve(null);
                }
            });
        },
        layoutInit(info, mod, appList, baseHost, ssoHost) {
            this.layoutData.appName = "应用页规范示例";
            this.layoutData.baseHost = baseHost;
            this.layoutData.ssoHost = ssoHost;
            const routes = this.$router.options.routes;
            let arr = [];
            mod.forEach(element => {
                let iconIndex = routes.findIndex(x => typeof x.meta !== "undefined" && typeof x.meta.modId !== "undefined" && typeof x.meta.icon !== "undefined" && x.meta.modId == element.modId);
                let icon = iconIndex > -1 ? "iconfont " + routes[iconIndex].meta.icon : ""; //icon不传则为默认
                arr.push({
                    id: element.id,
                    name: element.name,
                    modId: element.modId,
                    page: element.page,
                    children: element.children || [],
                    icon,
                });
            });
            // arr[0].icon = "iconfont icon-apps"; //icon样式示例，参见static/style/font 目录
            this.layoutData.modList = arr.sort((a, b) => a.modId - b.modId);
            this.layoutData.isAlone = arr.length == 1; //当只有一个选项卡时，隐藏menu和nav
            let { id, name, profilePicture } = info;
            this.layoutData.userInfo = { id, name, avatar: profilePicture };
            this.layoutData.appList = appList || [];
            //无权限
            if (arr.length == 0) {
                this.layoutData.isAlone = true;
                this.isNoAuthority = true;
            }
        },
        setCurrentRole(result, baseHost) {
            if (result) {
                let { childId, roleId, schId } = result.checkRole;
                localStorage.setItem("currentRole", encodeURI(JSON.stringify({ childId, roleId, schId })));
                localStorage.setItem("themeVersion", result.themeVersion);
                appendLink(baseHost, result.themeName, result.themeVersion);
            } else {
                appendLink(baseHost, "default-theme", new Date().getTime());
            }
        },
    },
};
</script>


<style lang="scss">
#loging-box,
.mop-load-div {
    display: none;
}
/* 开始过渡阶段,动画出去阶段 */
.fade-enter-active,
.fade-leave-active {
    transition: all 1ms cubic-bezier(0, 0.99, 1, 0.03);
}
/* 进入开始 */
.fade-enter {
    // transform: translateY(10px);
    opacity: 0;
}
/* 出去终点 */
.fade-leave-active {
    // transform: translateY(-10px);
    // opacity: 0;
}

.back-enter-active,
.back-leave-active {
    transition: all 1ms cubic-bezier(0, 0.99, 1, 0.03);
}
/* 进入开始 */
.back-enter {
    display: none;
}
/* 出去终点 */
.back-leave-active {
    display: none;
}
#app {
    height: 100%;
}
</style>