微信小程序(五十)请求拦截器实现携token获取用户信息

本文主要是介绍微信小程序(五十)请求拦截器实现携token获取用户信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

注释很详细,直接上代码

上一篇

新增内容:
1.个人信息框基本样式
2.请求拦截器携token获取个人信息进行渲染

源码:

utils/http.js

import http from "wechat-http"//设置全局默认请求地址
http.baseURL = "https://live-api.itheima.net"//设置请求拦截器
http.intercept.request=(config)=>{const app=getApp()console.log('请求内容:',config)/*这里也有一个坑,如果不小心习惯性写成console.log('请求内容:'+config)则会输出 请求内容:[object Object]原因:在 JavaScript 中,当您尝试将一个对象直接与字符串相加时,会将对象转换为字符串 [object Object]*/ //错误示范/*错误原因:这里是赋值,而我们本身就不存在这个对象,所以应该创建一个config.header.Authorization=app.token*///正确示范/* ...config 的作用是将 config 对象中的所有属性和值展开到 config.header 对象中,从而将 config.header 对象与 config 对象中的属性合并在一起如果有属性名相同此处优先级高于原先优先级*/config.header={Authorization:'Bearer '+app.token,...config.header}return config
}//设置响应拦截器
http.intercept.response=(res)=>{return res.data
}//导出
export default http

app.js

//从utils导入http
import http from './utils/http'//注册到全局wx实例中
wx.http=httpApp({//我这里提供一个现成的tokentoken:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY4Mzk1NzkwNjU5NTQzMDQiLCJpYXQiOjE3MDkzODI0MjgsImV4cCI6MTcwOTQxMTIyOH0.dxkk2S_L_vs-CHs9pKymcFEEe00DqLF9h5urUAJmMDk'})

index.wxml

<!-- 图个方便咱样式全写行内了 -->
<view style="background-color: royalblue; border-radius: 30rpx; "><view style="padding:20rpx 0 0 20rpx;display: flex;flex-direction: column; align-items: center;"><view><image src="{{userInfo.avatar?userInfo.avatar:initUserInfo.avatar}}" mode="aspectFill" style="width: 100rpx ;height: 100rpx; border-radius: 50%;"/></view><view style="margin-bottom: 20rpx;"><text style="color: pink;">{{userInfo.nickName?userInfo.nickName:initUserInfo.nickName}}</text></view></view>
</view>

index.js

Page({data:{initUserInfo:{//这里是默认的用户头像昵称信息,当原来的token不存在或为空时会启用(wxml中有三元表达式判断)avatar:'https://profile-avatar.csdnimg.cn/06d540e9389b45649e01ca3798fdb924_m0_73756108.jpg',//csdn整来的头像链接😎😎😎nickName:'眨眼睛'},userInfo:{}//这里是通过token获取的个人信息},onLoad(){//获取全局变量中的tokenconst app=getApp()const token=app.token//如果token存在则使用token获取服务端信息if(token){this.getUserInfo()}//不存在呢,不存在则使用默认信息呗,等登入以后再获取刷新信息🤣🤣🤣},//获取用户信息async getUserInfo(){//发出get请求(数据在请求拦截器里面传入了)const res=await wx.http.get('/userInfo')//打印一下返回的内容瞅瞅(为什么只有一个.data,因为在响应拦截器里处理了一个)console.log('用户信息:',res.data)this.setData({userInfo:res.data})}
})

效果演示:

在这里插入图片描述

这篇关于微信小程序(五十)请求拦截器实现携token获取用户信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/777058

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py