小程序实现的登录流程解释

1. 小程序不需要用户注册

小程序寄生在微信APP内，微信已经做完了用户注册这个事情了，只需要微信告诉你这个微信用户是谁就行了。

传统的登录需要输入账号密码，为啥小程序登录不需要呢？因为小程序运行在微信里面，而此时用户本身必然处于微信的登录态，那么我们就可以通过调用uni-app提供的接口与微信服务器进行沟通，获取用户信息就行啦

小程序实现的登录流程实现逻辑

1.### 点击登录按钮获取微信用户微信头像，昵称等基本信息

为登录的 button 设置 open-type="getUserInfo" 属性和给按钮绑定@getuserinfo="getUserInfo" 事件，在事件处理函数中，用一个变量e来接收服务器返回的数据，通过参数e来判断是否获取用户信息成功。如果不成功就弹出一个提示框 uni.showToast({ title:‘获取用户信息失败’, duration:duration, icon:'none' })

如果获取用户信息成功，将用户的基本信息存入到vuex和本地。调用``` uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))

和```
 // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')

2.当获取到了微信用户的基本信息之后，还需要进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串。

调用微信登录接口uni.login(),获取code对应的值. 判断是否 uni.login() 调用失败. 如果失败就弹出一个提示框提示用户信息失败. uni.showToast({ title:‘获取用户信息失败’, duration:duration, icon:'none' })

如果uni.login() 调用成功，那么在服务器返回的参数中，包含有用户登录凭证 code. 然后我们调用登录的接口并把 code 参数传递给后台，去发请求获取token。如果响应状态码为成功，那么将 token 字符串持久化存储到本地和vuex中， vuex中的token从本地调用uni.getStorageSync方法读取。

3. 存储token成功后，需要进行页面的跳转

token存储成功之后，调用小程序提供的 uni.switchTab() API 进行页面的导航，导航到用户信息页面就可以啦

# 代码

1.loign页面的代码

2.vuex中用户信息的代码

const state = { // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: uni.getStorageSync('token') || '',

// 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'), // 重定向的 object 对象 { openType, from } redirectInfo: null }; const mutations = {

// 更新收货地址 updateAddress(state, address) { // console.log(1134); state.address = address // 将 address 对象持久化存储到本地 uni.setStorageSync('address', JSON.stringify(state.address)) },

//将用户的登录信息存储 updateUserInfo(state, info) { // console.log(info); // 修改state中的userinfo state.userinfo = info // 将info 进行本地存储 uni.setStorageSync('userinfo', JSON.stringify(info)) },

//将用户的登录的token进行存储 updateToken(state, token) { // console.log(token,'token信息'); // 将token存储到vuex中 state.token = token; // 将token存储到本地 uni.setStorageSync('token', token) },

// 用户退出登录的处理 clearUserInfo(state) { // console.log(1111); // 清空vuex中的address, token, userinfo state.address = {}, state.token = '', state.userinfo = {}, // 清除本地的address, token, userinfo uni.removeStorageSync('address'); uni.removeStorageSync('token'); uni.removeStorageSync('userinfo'); },

// 更新重定向的信息对象 updateRedirectInfo(state, info) { state.redirectInfo = info }

};

微信小程序登录注册逻辑处理