vue中给img的src添加token

因项目中安全测评的需要，请求图片时要求添加token，方法如下：

在项目中循环渲染的img标签中的图片要显示，src需要加请求头token（正常情况下，后端直接返回src的url）

1. 自定义子组件authImg，在这发送请求，获取img地址

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

<script>
export default {
    name: 'authImg',
    props: {
        authSrc: String
    },
    computed: {
        // 拿到token值，登录成功后由后台返回的
        token() {
            // 这里我把登录之后拿到的token放到了vuex中
            return this.$store.state.commonState.m_token;
        }
    },
    mounted() {
        
    },
    methods: {
        // 携带token请求img的src
        getImgSrcByToken() {
            // Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
            Object.defineProperty(Image.prototype, 'authSrc', {
                // 可写
                writable: true,
                // 可枚举
                enumerable: true,
                // 若configurable设为false，那就不可以delete了
                configurable: true
            });
            let img = this.$refs.img;
            let request = new XMLHttpRequest();
            request.responseType = 'blob';
            request.open('get', this.authSrc, true);
            request.setRequestHeader('token', this.token);
            request.onreadystatechange(e => {
                if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {
                    // URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象URL，这个新的URL对象表示指定的File对象或blob对象
                    img.src = URL.createObjectURL(request.response);
                    img.onload = () => {
                        // 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
                        URL.revokeObjectURL(img.src);
                    }
                }
            });
            request.send(null);
        },
    },
}
</script>    

　2. 父组件中调用

<authImg :authSrc="baseurl + '/download.do?id='+ files.name + '&height=60'" alt=""></authImg>

 

　

转自于：vue中给img的src添加token