course_resource/src/components/header/headerRight.vue

<template>
    <div class="header_right">
        <div>
            <el-button @click="goBack()">返回深教AI首页</el-button>
        </div>
        <div v-if="isLogin" class="loginAdmin">
            <div v-if="admin">
                <img src="" alt="">
                <!-- <span>管理后台</span> -->
                <router-link to="" @click="adminClick()"><span>管理后台</span></router-link>
            </div>
            <div style="min-width: 100px;">
                <img src="" alt="">
                <span style="cursor: pointer;" class="dropdownMenu" @click="userInfoShow = true">{{ userName }}</span>
                <ul v-if="userInfoShow" class="user_info">
                    <li @click="userInfoOpen()">个人资料</li>
                    <li @click="logout()">退出</li>
                </ul>
            </div>
        </div>
        <div v-else>
            <!-- <el-button @click="studentLogin()">学生登录</el-button> -->
            <el-button @click="linkLogin()">教师登录</el-button>
        </div>
    </div>
</template>

<script setup>
import axios from "axios"
import { ref, onMounted, watchEffect } from "vue"
import { userCurrentRole, userInfoStore } from '../../stores/counter'

const user = userInfoStore()
const isLogin = ref(false)
const admin = ref(false)
const userName = ref('username')
const CurrentRole = userCurrentRole()
const userInfoShow = ref(false)

onMounted(() => {
    document.addEventListener('click', (e) => {
        if (e.target.className !== 'dropdownMenu') {
            userInfoShow.value = false
        }
    })
})

const linkLogin = () => {
    top.location.href = `https://sz.edu.cn/thirdauth/oauth2/authorize?service=initService&scope=all&response_type=code&app_id=f03970962b254aa29115fefd42a8eeb7&redirect_uri=https://cloud.cocorobo.cn/api`
}

const adminClick = () => {
    console.log('admin')
    // U.MD.D.I.openInApplication('dataBoardSZCity') //市级数据看板
    // U.MD.D.I.openInApplication('dataBoardSZArea') //区级数据看板
    console.log(CurrentRole.CurrentRole)
    if (CurrentRole.currentRole === 'userAdministrator' || user.user.role == 1) {
        top.U.MD.D.I.openInApplication('dataBoardSZCity')
    } else if (CurrentRole.currentRole === 'securityAuditor') {
        top.U.MD.D.I.openInApplication('dataBoardSZArea')
    } else {
        top.U.MD.D.I.openApplication('Grade')
    }
}

const goBack = () => {
    top.location.href = "https://ai.szedu.cn/"
}

const userInfoOpen = () => {
    top.U.MD.D.I.openApplication('my')
}
const logout = () => {
    axios.post(`https://beta.api.cocorobo.cn/api/logout`).then(res => {
        console.log("logout", res)
        if (res.data == "logout") {
            top.location.href = "https://sz.edu.cn/thirdauth/oauth2/sso_logout?app_id=f03970962b254aa29115fefd42a8eeb7&redirect_uri=https%3A%2F%2Fcloud.cocorobo.cn%2Fapi"
        }
    })

}

watchEffect(() => {
    // console.log(user, 2222222222)
    if (JSON.stringify(user.user) != "{}") {
        isLogin.value = true
        userName.value = user.user.username
        if (CurrentRole.currentRole == "edupersonnel" || CurrentRole.currentRole == "areaAdministrator" || CurrentRole.currentRole == "userAdministrator" || CurrentRole.currentRole == "securityAuditor" || CurrentRole.currentRole == "schoolAdministrator" || CurrentRole.currentRole == "schoolSecurityAuditor" || CurrentRole.currentRole == "teacher" || user.user.type != 2) {
            admin.value = true
        }
    }
})
</script>
<style scoped lang="scss">
.header_right {
    display: flex;

    .loginAdmin {
        display: flex;
    }

    div {
        line-height: 60px;
        padding-right: 20px;

        img {

            vertical-align: middle;
        }

        span {
            padding: 10px;
            line-height: 60px;

        }

        .el-button {

            background: rgba(54, 129, 252, 1);
            color: #fff;
        }
    }

    .user_info {
        width: 100%;
        position: relative;
        background: #fff;
        border: 1px solid #fff;

        li {
            padding: 10px;
            cursor: pointer;
            // height: 40px;
            line-height: normal;
        }

        li:hover {
            background: rgb(54, 129, 252);
            color: #fff;
        }
    }
}
</style>