Uniapp小程序登录和登录验证

小程序的登录验证流程图:

第一步:获取微信用户的基本信息:

调用getUserProfile方法,获取用户基本信息

methods:{getUserProfile(){desc:"完善用户信息",success:(res)=>{this.saveUserInfo(res.userInfo) //将信息保存在状态机}     }
}
第二步:获取Code码

调用login()方法,获取code

const result2 = await uni.login()let query = {userInfo:userInfo,code:result2.code,appId:'xxxxxxx',appSecret:'xxxxxx'}

参数说明:

  • code:必传参数,后端需要通过 code 去获取用户的 openid;

  • userInfo:非必选参数,需要根据实际项目需求,看后端是否需要用户信息;

  • appId 和 appSecret:学习阶段需要传递,实际项目中不需要传递,这两个值会在后端直接设置好;

  • appId 和 appSecret 在“微信公众平台”中获取

第四步:在获取Code码后,调用request方法,获取token
const {data:{token}} = await uni.request({url:'http://www.sss.cn:3000/user/wxLogin',method:'POST',data:query,})this.saveToken(token)
第五步:将获取的Token保存在Vuex中
this.saveToken(token)

登录验证:

首先在user模块的状态机文件中编写actions的方法getUserInfoAsync来判断用户的token是否有效,如果无效直接跳到登录页面

actions:{getUserInfoAsync(context,payload){let token = {token:context.state.token};uni.request({url:"http://www.sssssss.cn:3000/user/getUserInfo",header:{"Authorization":context.state.token},data:{token:context.state.token},success:(res)=>{console.log('res',res);if(res.statusCode == 401){uni.showToast({title:"token已经过期重新登录",success() {context.commit('saveUserInfo',{})context.commit('removeToken','')uni.switchTab({url:'/pages/mine/mine'})}})}}})}}

验证的时候也是调用uni.request()方法

Vuex中的2配置

export default {namespaced:true,state:{userMessage:JSON.parse(uni.getStorageSync('userInfo') || '{}'),token:uni.getStorageSync('token')||'',},mutations:{saveUserInfo(state,payload){state.userMessage = payloaduni.setStorageSync('userInfo',JSON.stringify(payload))},saveToken(state,payload){state.token = payloaduni.setStorageSync('token',payload)},removeToken(state){state.userMessage = {}state.token = ''uni.removeStorageSync('userInfo')uni.removeStorageSync('token')}},

注意

这里需要注意的是,在将用户信息保存在Vuex之前,先将用户的值赋给state的userInfo,否则,在组件调用Vuex时,会产生用户信息无法立即更新,这是因为在组件中调用的state时,是在computed计算属性中调用state,而computed是在页面创建的时候才会被触发,又因为,当点击登录按钮的时候,我们才将用户信息保存在Vuex中,在这之前Vuex都是空白的数据。所以当我们获取用户信息的时候我们在组件中将信息保存在Vuex中并且将信息赋给Vuex。

退出登录:
import {createNamespacedHelpers} from 'vuex'
const {mapMutations}=createNamespacedHelpers('user')
export default {name:"userinfo",methods:{...mapMutations(['updateToken','updateUserInfo']),async logout(){const [err, succ] = await uni.showModal({title: '提示',content: '确认退出登录吗?'}).catch(err => err)if (succ && succ.confirm) {this.updateToken('')this.updateUserInfo({})}}}
]}

在components/userinfo/userinfo组件中完成用户的退出登录功能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38468.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

采用uni-app开发的多端圈子社区论坛系统

采用uni-app开发的多端圈子社区论坛系统 系统基于TP6 Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP。 拥有完善的后台管理,不…

uniapp之uni-starter小程序多端研发框架搭建与项目实践

随着移动互联网的飞速发展,无数移动APP琳琅满目;在移动App的发展的基础上,衍生了小程序、轻应用技术,它随时可用,但又无需安装卸载。 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”…

【记录】基于uni-app开发的微信小程序商城项目

一、项目基本结构 (一)tabbar页面 首页 分类 购物车 我的(用户中心) (二)非tabbar页面 搜索 商品列表 商品详情 微信支付 结构解析: 1. 构建一个小程序&#xff0c…

【uni-app项目】瑞幸咖啡小程序

技术栈 框架:uni-appui库:uview-ui编辑器:HBuilderXapi文档 api目前只有商品信息,之前完整版api文档不知道被我丢哪里去了,需要的话请订阅后私聊邮箱 功能描述 使用uni-app框架,仿照瑞幸小程序前端,与后端api对接(使用网上的接口),动态处理数据 功能如下 (注意!…

不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧! 事情前…

关于我在uni-app练手中遇到的坑

目录 页面层级结构的加载和回退 filePath编码 对象的深度克隆 弹幕的加载 ​编辑 uni-app内置浏览器加载视频失败 后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接 安卓里遍历uni-list-item错误 手机自带浏览器无法加载视频 乱码问题 video中…

【哈士奇赠书活动 - 17期】-〖uni-app跨平台开发与应用从入门到实践〗

文章目录 ❤️‍🔥 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍🔥 编辑推荐❤️‍🔥 抽奖方式与截止时间❤️‍🔥 赠书活动 → 获奖名单 ❤️‍🔥 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》…

1个月uni-app微信小程序开发上线实战专栏介绍

一、专栏介绍: 《uni-app开发微信小程序1个月上线实战》,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍:国服第二切图仔——资深前端开发工程师,具有六年以上的前端开发经验,曾在多家知…

深入浅析,一步步用GPT打造你的聊天机器人

使用GPT基于你自己的文档构建聊天机器人的分步指南。 微信搜索关注《Python学研大本营》,加入读者群,分享更多精彩 与ChatGPT聊天很有趣,而且信息量很大 —— 与它闲聊可以探索一些新的想法。但这些都是比较随意的用例,新奇感很快…

深入理解Python中的依赖注入

一文带你深入了解Python依赖注入。 微信搜索关注《Python学研大本营》,加入读者群,分享更多精彩 简介 依赖注入是软件工程中使用的一种设计模式,它允许在创建对象时由外部提供其依赖关系,而不是自己创建这些依赖关系。换句话说&a…

独立开发变现周刊(第84期):一个地理位置API服务,月收入1.5万美元

分享独立开发、产品变现相关内容,每周五发布。 (合集:https://ezindie.com/weekly ) 目录 1、tiny.host: 简单部署你的web项目2、Verif Tools: 一个在线虚拟身份信息生成器3、screen.studio: 一个桌面端的录屏编辑工具4、一个地理位置API服务&#xff0c…

李彦宏:十年后不会写提示词或被淘汰;GitHub发布Copilot X,动动嘴就能生成代码;Vite 4.2 发布|极客头条...

「极客头条」—— 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews) 一分钟速览新闻点&#…

22个提升生产力的工具推荐,稳了

子曰:工欲善其事,必先利其器。 本文给大家推荐22个提高生产力的工具,总有一款符合你的需求。😄😄😄 提高生产效率工具推荐 滴答清单/Todoist文件检索利器:Everything文件管理软件-Allen Explor…

百度抢先发布中国版ChatGPT——文心一言,现已开通测试申请

3月16日,百度抢先其他国内科技巨头一步,率先发布被誉为中国版ChatGPT的“文心一言”。 即日起,百度也通过“百度智能云”官网正式开发“文心一言”的预约,申请云服务测试。 但是,目前百度智能云只面向企业级客户开放文…

chatgpt赋能python:Python录制屏幕:如何用Python录制屏幕

Python录制屏幕:如何用Python录制屏幕 如果你曾经想过如何在电脑上录制自己的屏幕以制作教学视频或演示产品,那么你需要了解一些关于Python录制屏幕的知识。Python是一门强大的动态编程语言,因其易于学习、连接数据库和编写简洁的代码&#…

chatgpt赋能python:Python中常见的Module报错及解决方法

Python中常见的Module报错及解决方法 在Python编程过程中,经常会使用各种第三方库和模块,以提高代码的效率和可读性。然而,在使用这些模块时,我们有时会遭遇各种各样的错误和异常。本文将介绍Python中常见的Module报错现象及其解…

chatgpt赋能Python-pythonimport报错

Python中Import报错的处理方法 Python是一款非常流行的编程语言,也是众多开发者选择的首选。在代码中,我们通常会使用import语句来引入其他模块,但在实际开发过程中,我们有时会遇到ImportError:No module named XXX等…

chatgpt赋能Python-pythonnumpy报错

Python中Numpy出现报错的解决方法 介绍 Numpy是Python中常用的数学计算库,其支持高效的数组处理和运算,是很多数据科学工程师必备的编程工具之一。由于其强大的功能和灵活性,Numpy在各行各业都有广泛的应用。但有时候在使用Numpy时可能会出…

Open Ai 常见接口参数说明以及常见报错总结

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

chatgpt赋能python:Python打开文件遇到的常见报错类型

Python打开文件遇到的常见报错类型 Python作为一种高级编程语言,在开发过程中经常需要读取或写入文件。然而,在实际操作中,我们经常会遇到一些FileNotFoundError、PermissionError等错误类型。在本文中,我将介绍常见的Python打开…