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

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

调用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组件中完成用户的退出登录功能