Vue3 实现自定义图片展示组件并传输Token给后端进行权限校验

<template>
    <img ref="authImg" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

// 定义props
interface Props {
    imgUrl: string
    authToken: string
}

const props = defineProps<Props>()

const authImg = ref<HTMLImageElement | null>(null)

const getImgUrl = () => {
    // 移除无意义的Object.defineProperty调用
    let request = new XMLHttpRequest()
    request.responseType = "blob"
    request.open("get", props.imgUrl, true)
    request.setRequestHeader('token', props.authToken)

    request.onreadystatechange = () => {
        if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
            if (authImg.value) {
                authImg.value.src = URL.createObjectURL(request.response)
                authImg.value.onload = () => {
                    URL.revokeObjectURL(authImg.value!.src)
                }
            }
        }
    }
    request.send(null)
}

onMounted(() => {
    getImgUrl()
})

// 监听imgUrl变化
watch(() => props.imgUrl, () => {
    getImgUrl()
})

</script>