vue3 uniapp微信登录

根据最新的微信小程序官方的规定,uniapp中的uni.getUserInfo方法不再返回用户头像和昵称、以及手机号

首先,需获取appID,appSecret,如下图

先调用uni.getUserInfo方法获取code,然后调用后台的api,传入code,换取登录信息比如openid什么的,然后调用后台的例如账号密码或者手机验证码等相关登录的接口,换取token存入本地,即可。

uni.getUserInfo({
			provider: 'weixin',
			success: function(info) {
				// 获取用户信息成功, info.authResult保存用户信息
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, '---loginRes')
						wxLoginApi({
							code: loginRes.code
						}).then(res => {
							if (res.code === '200') {
								loginParamObj.value = res.data;
								if (loginParamObj.value.bindStatus === '1') {
											//已绑定,直接登录
											
									// userStore.SET_FRESH_TOKEN(res.data.refresh_token)
								} else {
									// 留在登录页
									initLoginStatus.value = true
								}
								
							}
						})
					},
					fail: function(err) {
						// 登录授权失败
						// err.code是错误码
					}
				});
			}
		})

登录后要配合pinia,将token存入本地即可

import {
	defineStore
} from 'pinia'
const user = defineStore(
	'user', () => {
		const token = ref(''); // 登录token
		const fresh_token = ref('');
		
		const SET_TOKEN = (value : string) => {
			token.value = value
		};
		const SET_FRESH_TOKEN = (value : string) => {
			fresh_token.value = value
		};
		return {
			token,
			fresh_token,
		}

	}, {
	unistorage: true // 开启后对 state 的数据读写都将持久化
})
// const user = ()=>{

// }
export default user

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3+uni-app实现微信小程序登录流程主要分为以下步骤: 1. 在uni-app项目中安装并引入微信小程序登录插件(如wxlogin),在main.js中初始化并配置插件参数。 2. 创建一个登录页面,该页面包含点击按钮触发微信登录的操作,可以通过uni.login()方法调用微信小程序登录接口获取code。 3. 接收到微信小程序登录接口返回的code后,将code发送给后端服务器,后端服务器将code和小程序的App ID以及App Secret发送给微信服务器进行登录凭证校验,获取到session_key和openid。 4. 服务器根据openid和session_key生成一个自定义的token,返回给前端。 5. 前端将token保存在本地,使用uni.setStorage()方法进行存储,以便后续的登录状态维持和接口请求验证。 6. 在需要登录验证的页面或组件中,通过uni.getStorage()方法获取本地存储token,并将token添加到请求头中,发送给后端服务器进行接口请求。 7. 后端服务器接收到带有token的请求,对token进行校验和解析,验证token是否有效,从而确保用户的登录状态。 总结:通过以上步骤,实现Vue3+uni-app微信小程序的登录流程。用户通过点击按钮触发微信小程序登录接口,后端服务器校验登录凭证,生成token并返回给前端,前端保存token并在请求接口时携带token进行验证,保证了用户的登录状态和接口访问权限的安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值