img图片鉴权附加token

文章介绍了在Vue应用中,为了满足安全需求,如何在img标签的src属性或请求头中添加token进行身份验证。提供了两种方法:一是直接在URL中拼接token,二是通过自定义组件封装下载文件逻辑并设置Authorization头。
摘要由CSDN通过智能技术生成

<img 标签预览图片如何携带token进行验证

前言 vue中给img的src添加token


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

在项目中循环渲染的img标签中的图片要显示,src需要加请求头token(正常情况下,后端直接返回src的url)
图片在前端开发中扮演了重要的角色,它们不仅仅是美观的元素,还可以传递信息和激发用户的兴趣。随着应用场景的增多,前端开发人员就需要在图片加载过程中携带验证的信息。如 token,用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息,从而实现图片信息的安全传输。

实现思路

  • 1、在img 请求图片时要求添加token:src 后 url?token=‘’ 拼接, 或通过设置在请求头里,可以使用XMLHttpRequest
  • 2、间接通过一个后端api 下载文件到本地

尝试 第1方案

vue中给img的src添加token

在这里插入图片描述

  1. 自定义子组件AuthImg,在这发送请求,获取img地址
<template>
    <div>
        <!-- 显示图片 -->
        <img ref="img" :style="{width:width,height:height}" v-if="imgType == 'view'" />
        <!-- 使用element-ui的el-image进行图片预览 -->
        <el-image :style="{width:width,height:height}" ref="previewimg" v-if="imgType == 'preView'" :src="previewpath"
                  :preview-src-list="previewList"></el-image>
    </div>
</template>

<script>

import {getToken} from "@/utils/auth";

export default {
    name: 'AuthImg',
    props: {
        imgSrc: String,
        // 图片类型,可选为'view'(仅预览图片)或'preView'(可点击预览)
        imgType: {
            type: String,
            default: "view",
        },
        // 图片的宽度
        width: {
            type: String,
        },
        // 图片的高度
        height: {
            type: String,
        },
    },
    data() {
        return {
            // 预览图片列表
            previewList: [],
            // 预览图片路径
            previewpath: "",
        };
    },
    computed: {
        // 拿到token值,登录成功后由后台返回的
        token() {
            // 这里我把登录之后拿到的token放到了vuex中
            return getToken();
        }
    },
    mounted() {

    },
    methods: {
        // 携带token请求img的src
        getImgSrcByToken() {
            // Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
            Object.defineProperty(Image.prototype, 'imgSrc', {
                // 可写
                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.imgSrc, true);
            request.setRequestHeader('Authorization', 'Bearer ' + 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>

  1. 父组件中调用
<authImg :imgSrc="baseurl + '/download.do?id='+ files.name + '&height=60'" alt=""></authImg>

下面尝试 第2方法:

  1. 创建一个名为 tokenImg 的组件,该组件用于显示图片并支持预览功能;
  2. 在组件的模板中,使用 标签来显示图片,或使用 element-ui 的 标签进行图片预览;
  3. 在组件的属性中,接收图片的 URL 地址 (imgUrl)、图片类型 (imgType)、图片的宽度 (width) 和高度 (height);
  4. 在组件的数据中,定义预览图片列表 (previewList) 和预览图片路径 (previewpath)
  5. 实现两个方法 viewModel() 和 preViewModel() 分别用于仅预览图片和带缩略图预览;
  6. 在 viewModel() 方法中,通过调用下载文件的 API (downloadFileApi) 并根据返回的文件内容创建 URL 对象,将图片 URL 赋值给 标签的 src 属性;
  7. 在 preViewModel() 方法中,同样调用下载文件的 API,将返回的文件内容创建 URL 对象,并将 URL 添加到预览图片列表中;
  8. 使用 watch 监听 imgUrl 属性的变化,在变化时根据 imgType 属性的值来调用对应的方法;
  9. 在组件的 mounted() 钩子中,根据初始的 imgType 属性值来调用对应的方法;
  10. 在 main.js 文件中将 tokenImg 组件注册为全局组件,以便在其他地方使用;
  11. 在需要使用该组件的地方,使用 标签,并传递相应的属性(如图片 URL、图片类型、宽度和高度);
    这样,你可以在前端中使用 tokenImg 组件来显示带有 Token 的图片,并支持预览功能。注意确保在组件使用时传递正确的图片 URL、类型、宽度和高度。

封装文件

<template>
  <div>
    <!-- 显示图片 -->
    <img ref="img" :style="{width:width,height:height}" v-if="imgType == 'view'" />
    <!-- 使用element-ui的el-image进行图片预览 -->
    <el-image :style="{width:width,height:height}" ref="previewimg" v-if="imgType == 'preView'" :src="previewpath"
      :preview-src-list="previewList"></el-image>
  </div>
</template>
<script>
// 引入的接口文件
import { downloadFileApi } from "@/api/publicApi/enumeration";
export default {
  name: "token-img",
  props: {
    // 图片的URL地址
    imgUrl: {
      type: String,
    },
    // 图片类型,可选为'view'(仅预览图片)或'preView'(可点击预览)
    imgType: {
      type: String,
      default: "view",
    },
    // 图片的宽度
    width: {
      type: String,
    },
    // 图片的高度
    height: {
      type: String,
    },
  },
  data() {
    return {
      // 预览图片列表
      previewList: [],
      // 预览图片路径
      previewpath: "",
    };
  },
  methods: {
     // 查看文件 
    //仅预览图片
    viewModel() {
      const img = this.$refs.img;
      // 调用下载文件的API并根据返回的文件内容创建URL对象
      downloadFileApi(this.imgUrl).then((res) => {
        img.src = URL.createObjectURL(res);
        img.onload = () => {
          URL.revokeObjectURL(img.src);
        };
      });
    },
    //带缩略图预览
    preViewModel() {
      downloadFileApi(this.imgUrl).then((res) => {
        // 调用下载文件的API并根据返回的文件内容创建URL对象
        this.previewpath = URL.createObjectURL(res);
        this.previewList.push(this.previewpath);
      });
    },
  },
  watch: {
    // 监听imgUrl变化
    imgUrl() {
      if (this.imgType == "view") {
        this.viewModel();
      } else if (this.imgType == "preView") {
        this.preViewModel();
      }
    },
  },
  mounted() {
    if (this.imgType == "view") {
      this.viewModel();
    } else if (this.imgType == "preView") {
      this.preViewModel();
    }
  },
};
</script>
引入的接口文件
export function downloadFileApi(imgUrl) {
  return request({
    url: "/api/file/examine-preview"+imgUrl,
    method: "get",
    responseType: "blob",
  });
}
main.js
// 将其注册为全局组件
import TokenImg from "@/components/tokenImg";
Vue.component('TokenImg', TokenImg)
使用文件
<TokenImg :width="`50px`" :height="`50px`" :imgUrl="YourUrl" :imgType="`preView`"/>
实现效果

在这里插入图片描述

在这里插入图片描述

渲染查看

在这里插入图片描述

拓展

下载文件携带 token
第一种方式:手写实现

//下载方法
getBgdzByGcsj(row) {
  // 通过接口下载文件
  downloadFileApiDown(row.bgdz).then((res) => {
    // 将文件流转换为下载链接
    const downloadUrl = URL.createObjectURL(res);
    // 创建一个<a>标签
    const link = document.createElement("a");
    // 设置链接的URL为下载链接
    link.href = downloadUrl;
    // 设置下载的文件名为"报表管理.xls"
    link.download = "报表管理.xls";
    // 隐藏<a>标签
    link.style.display = "none";
    // 将<a>标签添加到页面的<body>中
    document.body.appendChild(link);
    // 触发<a>标签的点击事件,开始下载
    link.click();
    // 下载完成后删除<a>标签
    document.body.removeChild(link);
  });
}
  • 25
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
.NET 6作为Microsoft的最新版本的开发框架,提供了丰富的功能和工具来简化开发过程。在.NET 6中,使用Redis进行鉴权和管理token是一个常见的需求。Redis作为一个内存数据库,提供了高效的数据存储和快速的访问,非常适合用来存储和管理token。 在.NET 6中,我们可以使用StackExchange.Redis这个开源库来连接和操作Redis数据库。首先,我们需要在.NET 6的项目中引入StackExchange.Redis的NuGet包,并配置连接到Redis数据库的相关信息,例如服务器地址、端口号和密码等。通过这些配置,我们就可以在.NET 6中建立和管理与Redis的连接。 接着,我们可以使用StackExchange.Redis提供的API来操作Redis数据库,实现token的存储、更新和删除等功能。通过使用合适的数据结构和命令,我们可以在Redis数据库中存储和管理用户的token信息,同时可以设置token的过期时间和权限策略来保障系统的安全性。 除了基本的token管理功能,我们还可以利用Redis的发布订阅功能来实现实时的token验证和更新。通过发布订阅机制,我们可以在用户登录或注销时及时更新Redis中的token信息,保证用户的访问权限和安全性。 总之,通过在.NET 6中集成Redis数据库,并使用StackExchange.Redis库来实现token鉴权和管理,我们可以简化开发工作,提高系统的性能和安全性,为用户提供更好的使用体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值