关于小程序图片预览image请求中增加验证token的问题

最新推荐文章于 2024-05-22 15:29:13 发布
最新推荐文章于 2024-05-22 15:29:13 发布
阅读量5.4k 收藏 9
点赞数 3
分类专栏： 小程序 文章标签： 小程序 小程序图片增加头部 小程序图片网络地址增加头部 小程序图片请求 小程序图片授权请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lb1135909273/article/details/106715518
版权

小程序在image标签内直接在src中填写上图片的网络地址，是无法添加头部信息的。这样对于我们保密的图片需要验证头部的token信息，是没有增加的。问题如下图：

在这里插入图片描述

这是将网络地址直接写到了src中的情况，401授权问题

官网也没有提出这个问题怎么解决，自行考虑

既然我们没法直接添加头部授权信息，那么我们就按照正常的请求去请求这个图片地址，看看结果

注意此时请求从img变成了xhr

记得在正常请求中添加头部信息，这里wx.request中header的写法详见官网，不再赘述

在这里插入图片描述

看请求已经是200表示正常了，但是结果是二进制文件，不能够直接放到图片的路径中，如下图

在这里插入图片描述

怎么办呢，既然如此，那么我们就把这个地址使用wx.downloadFile这个api去缓存到本地，生成一个临时地址，用这个临时地址来展示
在这里插入图片描述

在这里插入图片描述

在成功的函数中向图片地址赋值

在这里插入图片描述

即可展示，因为是身份证照图片，所有马赛克了，望见谅。

此种流程即可。

李小斌96
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带token查看图片自定义组件
weixin_44274094的博客
04-27 542
```javascript <template> <img :id="id" style="display: none;"/> //原生 <a-image :width="width" :height="height" :src="src" /> //antdvue组件 </template> <script lang="ts"> import { useUserStore, } from "/@/store/modules/user"; import { ref, } from 'vu
微信小程序登录换取token的教程
12-03
在开发微信小程序的过程中，用户身份验证是非常关键的一环，而这个过程通常涉及到获取和使用token。本教程主要讲解如何通过微信小程序的登录流程换取token，以及处理可能出现的错误。 一、微信登录换取token的流程 ...
微信小程序image组件无法携带cookie问题解决
baorant24的博客
05-08 458
本文介绍了微信小程序是如何加载需要cookie的图片的
微信小程序自定义头部
最新发布
我是小鹏呀的博客
05-22 942
由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。胶囊按钮的信息可以通过 wx.getMenuButtonBoundingClientRect() 获取。导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。2. 状态栏的高度可以通过 wx.getSystemInfo() 获取。该页面自定义头部，也支持分享好友，导致分享出去点左上角的返回没有反应。
vue 前端显示图片加token_vue实现微信小程序服务通知推送功能
weixin_39965514的博客
11-16 310
点击上方java项目开发，选择设为星标优质项目，及时送达-----案例功能效果图6、最终效果提示：开发者工具中点击无效、必须要真机上点击测试步骤如下1、开通消息推送开发—)开发设置—)消息推送找到消息推送并配置URL、Token等相关选项2、添加消息模板在公共模板库配置自己想用的模板3、配置好服务器域名后，在开发工具中把 不校验合法域名、web-view(业务域名)、TLS...
钉钉小程序浏览图片加token
codeLAU的博客
08-25 458
钉钉小程序 图片加token 如何预览
微信小程序携带token请求
m0_61204947的博客
06-11 2232
小程序请求携带token的方法
加载图片需要 token
m0_38066007的博客
05-20 136
【代码】加载图片需要 token。
微信小程序配置服务器提示验证token失败的解决方法
12-01
最近在学习微信小程序，遇到的第一个问题就是需要配置服务器 关于这个服务器的配置我也是绕了好多弯路，说白了腾讯就是想通过你填的这个URL和Token去验证你有一个自己的服务器(外网可以访问的服务器)，其实就是想...
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
10-14
在Vue应用程序中，实现登录验证成功后保存和管理token的操作是确保用户会话安全和持久的重要步骤。通常，服务器在用户成功登录后会返回一个令牌（如JWT，JSON Web Token），这个令牌用于后续的API请求，以验证用户的...
img标签请求 添加自定义header（二）
a736755244的博客
05-29 5229
img标签 添加自定义请求头
img图片鉴权附加token
nalanxiaoxiao2011的博客
02-07 3045
img标签增加token鉴权 图片预览鉴权
Ts中El-image展示图片需要token怎么办，写成组件形式
chabaimgg的博客
10-25 507
【代码】Ts中El-image展示图片需要token怎么办，写成组件形式。
微信小程序开发-----发起网络请求携带后端token
qq_48627750的博客
11-18 2022
请求头携带token
php小程序数据验签,使用php进行微信小程序图片安全验证
weixin_30682043的博客
03-11 237
想用到微信公众平台的图片识别系统,结果报错{"errcode":41005,"errmsg":"media data missing hint: [xScHza03164711]"}"代码如下：class getImgSecCheck{function get_data(){$url = "https://api.weixin.qq.com/wxa/img_sec_check?access_tok...
探索前端图片如何携带token进行验证
Shids_的博客
07-31 3176
探索前端图片如何携带token进行验证
vue中给img的src添加token
热门推荐
小七的博客
03-29 1万+
在项目中循环渲染的img标签中的图片要显示，src需要加请求头token（正常情况下，后端直接返回src的url） 子组件authImg中写标签渲染 <template> <img ref="img"> </img> </template> <script> export default { name: "authImg", props: { authSrc: { type: String, req
SpringBoot、uniapp项目整合token验证
weixin_52360147的博客
10-04 2011
SpringBoot 、uniapp整合token令牌验证，前后端详细过程
关于图片带token访问，mui 图片访问带token
云祈的博客
06-13 8844
var xmlhttp; xmlhttp = new XMLHttpRequest(); xmlhttp.open(“GET”, “http://168.68.201.204:8181/file/download/” + element.fileId, true); xmlhttp.responseType = “blob”; xmlhttp.setRequestHeader(“Authoriza...
Vue中登录成功保存token，并每次请求携带并验证token
05-24
在 Vue 中保存 token 可以使用浏览器的 localStorage 或者 sessionStorage。localStorage 存储在本地并且不会过期，sessionStorage 存储在浏览器关闭后会自动删除。 以下是一个示例代码： ```javascript // 登录成功后保存 token localStorage.setItem('token', 'your_token'); // 在发送请求时携带 token axios.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); // 在服务端验证 token axios.interceptors.response.use( response => { return response; }, error => { if (error.response && error.response.status === 401) { // 清除 token 并跳转到登录页面 localStorage.removeItem('token'); router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); } return Promise.reject(error); } ); ``` 在发送请求时，通过 axios 拦截器在请求头中添加 token，服务端可以从请求头中获取 token 进行验证。如果服务端返回 401 错误码，说明 token 无效或者过期，此时前端应该清除 token 并跳转到登录页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值