微信小程序(五十)请求拦截器实现携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

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定