摘要：首先要明白一件事，小程序中的登錄和授權其實是兩個操作。拿到之后，引導用戶觸發的組件，在回調事件中拿到以及，與一起傳給后臺，后臺通過這些向微信服務器請求到和之后，自定義登錄態并將其與和關聯起來然后寫。

首先要明白一件事，小程序中的登錄和授權其實是兩個操作。
登錄的意義就是讓web服務器知道當前的用戶是誰，傳統的web應用中用戶通過輸入賬號和密碼實現登錄，而小程序中對應的是openId（當前用戶對應的唯一標識）。

每個用戶相對于每個微信應用（公眾號或者小程序）的openId 是唯一的，也就是說一個用戶相對于不同的微信應用會存在不同的openId.

小程序中的授權分為很多種，使用攝像頭、錄音功能、用戶信息等等，大多數情況下通過官方提供給的wx.authorize()就可以獲取對應的授權（彈出微信授權的對話框，用戶允許之后即可獲得），但今天要說的用戶信息授權，在小程序一系列改版之后，則需要通過其他方式獲得。

下面是前端代碼實現思路。

調用wx.login()方法獲取code（登錄憑證），然后發送給后臺，后臺就可以通過code2Session向微信服務器請求到openid和session_key。

mounted (){
    wx.login({
        success (res) {
            if (res.code){
                // 這里可以把code傳給后臺，后臺用此獲取openid及session_key
            }
        },
    })
}

只獲取到用戶的openid意義并不大，我們還需要用戶的昵稱、頭像等個人基本信息，獲取這些是需要用戶授權的。大多數情況下我們通過調用wx.authorize()就可以向用戶發起某種授權請求，也就是彈窗詢問用戶是否同意授權小程序使用某項功能或獲取用戶的某些數據。

例如想調用設備的錄音功能：

wx.authorize({
    // 通過scope指明申請獲取哪種類型的權限
    scope: "scope.record",
    success() {
      // 用戶已經同意小程序使用錄音功能，后續調用 wx.startRecord 接口不會彈窗詢問
      wx.startRecord()
    }
})

會彈出以下彈窗
"，也就是需要用戶手動點擊open-type=getUserInfo的組件才可以彈出請求權限的彈窗。

// template代碼

獲取權限

//script代碼

getUserInfoClick(){
    // console.log("click事件首先觸發")
}，
bindGetUserInfo(e) {
    // console.log("回調事件后觸發")
    const self = this;
    if (e.mp.detail.userInfo){
        console.log("用戶按了允許授權按鈕")
        let { encryptedData,userInfo,iv } = e.mp.detail;
        self.$http.post(api,{
            // 這里的code就是通過wx.login()獲取的
            code:self.code,
            encryptedData,
            iv,
        }).then(res => {
            console.log(`后臺交互拿回數據:`,res);
            // 獲取到后臺重寫的session數據，可以通過vuex做本地保存
        }).catch(err => {
            console.log(`api請求出錯:`,err);
        })  
    } else {
        //用戶按了拒絕按鈕
        console.log("用戶按了拒絕按鈕");
    }
},

到這里就已經獲取到用戶的基本信息了，可以再稍微優化一下。雖然通過wx.getUserInfo()方法已經不能彈出授權窗口，但授權狀態會保存在緩存中，只要授權過且沒過期，便可以通過此api的success回調直接獲取到用戶信息，否則進入會進入fail回調，此時我們再提示用戶點擊組件進行主動過授權即可。

// template代碼

獲取權限

// javascript代碼

mounted () {
    const self = this;
    wx.login({
        success (res) {
            if (res.code){
                self.code = res.code;
                self.wxGetUserInfo(res.code);
            }
        },
    })
},
methods: {
    wxGetUserInfo (code) {
        const self = this;
        wx.getUserInfo({
            withCredentials: true,
            success (res) {
                let { encryptedData,userInfo,iv } = res;
                self.$http.post("api",{
                    code,
                    encryptedData,
                    iv,
                }).then(res => {
                    console.log(`后臺交互拿回數據:`,res);
                    // 獲取到后臺重寫的session數據，可以通過vuex做本地保存
                }).catch(err => {
                    console.log(`自動請求api失敗 err:`,err);
                })  
            },
            fail (err) {
                console.log("自動wx.getUserInfo失敗:",err);
                // 顯示主動授權的button
                self.buttonVisible = true;
            }
        })
    },
    bindGetUserInfo(e) {
        // console.log("回調事件后觸發")
        const self = this;
        if (e.mp.detail.userInfo){
            console.log("用戶按了允許授權按鈕")
            let { encryptedData,userInfo,iv } = e.mp.detail;
            self.$http.post(api,{
                // 這里的code就是通過wx.login()獲取的
                code:self.code,
                encryptedData,
                iv,
            }).then(res => {
                console.log(`后臺交互拿回數據:`,res);
                // 獲取到后臺重寫的session數據，可以通過vuex做本地保存
            }).catch(err => {
                console.log(`api請求出錯:`,err);
            })  
        } else {
            //用戶按了拒絕按鈕
            console.log("用戶按了拒絕按鈕");
        }
    },
}

到這里，就通過mpvue簡單實現了小程序得登錄及獲取用戶信息授權，總結一下：

首先要通過wx.login()獲取code，也就是登錄憑證。

拿到code之后，引導用戶觸發open-type="userinfo"的button組件，在回調事件中拿到encryptedData以及iv，與code一起傳給后臺，后臺通過這些向微信服務器請求到openId和session_key之后，自定義登錄態并將其與openId 和session_key 關聯起來然后寫session。

后臺將登錄態返回給前端，前端筒骨vuex或者wx.setStorageSync() 方式講session全局保存起來。