如何解决img标签的src需要携带token

10 篇文章 1 订阅

一、业务场景

上传头像后需要回显头像,而后端给出的预览头像的接口需要携带token,因此直接在img标签的src属性怼上头像地址是不可行的,因为无法携带token。

二、解决思路

参考该大佬的思路,主要有一下两个思路:
1.先通过请求获取二进制图片,将图片转成base64,img标签的src属性可以解析base64

2.改变用户验证的方式,通过URL方式传token. 一般情况下用户token是放在header中的,但是img标签无法配置header。

此文采用的是第一种方式,即转base64

三、代码

/**
 * 预览头像
 * @param params
 * @returns {*}
 */
export const previewAvatar = (params) => {
  return request({
    url: 'xxxxx/xxx',
    params,
    method: 'get',
    responseType: "blob", // 获取图片的二进制流
  })
}

// 请求图片
previewAvatar({
                filename: avatarName,
                uloginname: state.userName
              }).then(newRes => {
              //  URL.createObjectURL(newRes) 对请求回来的图片转成base64,并得到一个当前文件的一个内存URL
                commit('setAvatar', URL.createObjectURL(newRes))
              })

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
如果UniApp的WebSocket无法直接携带Token,你可以考虑以下两解决方案: 1. 将Token参数传递: 在创建WebSocket连接,将Token为连接地址的一部分传。例如,将Token作为查询参数附加在WebSocket连接地址的末尾。 示例代码如下: ```javascript // 在需要使用WebSocket的页面或组件中 // 获取Token let token = uni.getStorageSync('token'); // 创建WebSocket连接 let socket = uni.connectSocket({ url: 'ws://your-websocket-url?token=' + token, success() { console.log('WebSocket连接成功'); }, fail() { console.log('WebSocket连接失败'); } }); // 其他监听事件... ``` 在上述代码中,将Token作为查询参数附加在WebSocket连接地址的末尾,通过`?token=`的方式传递。 2. 使用自定义协议: 在创建WebSocket连接,通过自定义协议将Token发送到服务器端。你可以在服务端编写相应的代码来解析和验证Token。 示例代码如下(前端): ```javascript // 在需要使用WebSocket的页面或组件中 // 获取Token let token = uni.getStorageSync('token'); // 创建WebSocket连接 let socket = uni.connectSocket({ url: 'ws://your-websocket-url', success() { console.log('WebSocket连接成功'); // 发送Token socket.send({ data: JSON.stringify({ token: token }) }); }, fail() { console.log('WebSocket连接失败'); } }); // 其他监听事件... ``` 在上述代码中,创建WebSocket连接后,通过`socket.send()`方法将Token发送到服务器端。在服务端,你需要解析接收到的数据,并验证Token的有效性。 这些解决方案都是基于WebSocket的特性和UniApp框架的限制进行的。根据实际情况,你可以选择适合你项目的方式来携带Token

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值