course_resource/src/components/header/headerRight.vue

<template>
    <div class="header_right">
        <div v-if="isLogin" class="loginAdmin">
            <div v-if="admin">
                <img src="" alt="">
                <router-link to="/admin"><span>管理后台</span></router-link>
            </div>
            <div>
                <img src="" alt="">
                <span>{{ userName }}</span>
            </div>
        </div>
        <div v-else>
            <el-button @click="linkLogin()">登录</el-button>
        </div>
    </div>
</template>

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

const user = userInfoStore()
const isLogin = ref(false)
const admin = ref(false)
const userName = ref('')
// onMounted(() => {
//     console.log(user)
//     if (JSON.stringify(user.user) != "{}") {
//         isLogin.value = true
//         userName.value = user.user.userName
//         if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher") {
//             admin.value = true
//         }
//     }
// })

const linkLogin = () => {
    top.location.href = `http://szedutest.changyan.cn/thirdauth/oauth2/authorize?service=initService&scope=all&response_type=code&app_id=94c720f0634b4bad890dc9223de01166&redirect_uri=https://cloud.cocorobo.cn/testapi`
}

watchEffect(() => {
    // console.log(user, 2222222222)
    if (JSON.stringify(user.user) != "{}") {
        isLogin.value = true
        userName.value = user.user.userName
        if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher" || user.user.currentRole == "visitor") {
            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;
        }
    }
}
</style>