1、 问题: 我在vue3的一个项目,需要使用img标签获取后端的图片,但是需要在请求头添加token。尝试发现这种请求不经过axios的拦截请求,且不能以参数的方式携带token(不安全)
2、解决方法: 自定义一个组件(TokenImg.vue)
<script setup>
import {onBeforeMount, ref} from 'vue';
import axios from "axios";
const props = defineProps({
src: String,
token: String
});
const tempUrl = ref(null);
onBeforeMount(async () => {
const response = await axios.get('/api' + props.src, {
headers: {
Authorization: props.token,
},
responseType: "blob"
});
tempUrl.value = URL.createObjectURL(response.data);
});
</script>
<template>
<img :src="tempUrl"/>
</template>
3、调用组件验证正确性
import TokenImg from "@/components/TokenImg.vue";
<TokenImg :src="userInfo.info.avatar" :token="userInfo.info.token" style="width: 40px;height=40px;"/>