小程序的登录验证流程图:
第一步:获取微信用户的基本信息:
调用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组件中完成用户的退出登录功能