图片或者el-avatar头像组件获取图片信息手动添加认证信息(token/Authorization)

最新推荐文章于 2024-06-17 11:53:54 发布

前端李十三

最新推荐文章于 2024-06-17 11:53:54 发布

阅读量602

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_64530670/article/details/137515527

版权

本文讨论了解决前端项目中图片资源鉴权问题的方法，通过客户端脚本如Axios预加载图片，获取Base64或BlobURL编码的图片，并在el-avatar组件中使用，确保只有授权用户能看到私密图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景:

原先项目中的图片资源是没有添加鉴权的，也就是说假如后端返回给你一个头像图片的资源地址为:"/XXX/file/Image/userAvatar/207.jpg"，此时浏览器自动请求到了这张图片对应的图片资源，但是这时候你将资源后面的207改成208，那同样的，如果数据库中含有"/XXX/file/Image/userAvatar/208.jpg"的资源，那么你就能够顺利的拿到这张图片的资源，但是对于部分图片资源来说，可能是隐私资源，后端并不想让没有这张图片权限的人来获取这张图片的信息，于是后端加上了鉴权。但是后端加上鉴权了，可是我们前端的图片请求是默认不会走request请求拦截器的,也就是说我们在request拦截器中写的给请求加上Authorization不会生效，这时候我们就无法获取到图片资源了。

解决：使用客户端脚本预先请求图片

使用JavaScript（例如，使用Axios）先请求图片资源，然后将获取的图片以Base64或Blob URL的形式传递给`el-avatar`。这涉及到先使用Ajax请求图片，并处理好认证头，然后再处理响应数据。

<template>
  <div>
    <!-- 绑定el-avatar的src属性到avatarUrl -->
    <el-avatar :src="avatarUrl"></el-avatar>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    r