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 = payload
            uni.setStorageSync('userInfo',JSON.stringify(payload))
        },
        saveToken(state,payload){
            state.token = payload
            uni.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组件中完成用户的退出登录功能