現(xiàn)在各種應(yīng)用都要求用戶登錄使用，而一般登錄需要的是手機(jī)號和密碼，但是不同的應(yīng)用使用同樣的手機(jī)和密碼是有安全風(fēng)險(xiǎn)的。因此，我們需要使用第三方登錄方式，比如微信登錄的方式，這要求我們獲取微信的openid。今天，我們講述在vue應(yīng)用中如何獲取openid。

首先，我們需要在微信公眾平臺中創(chuàng)建一個應(yīng)用，然后在應(yīng)用詳情中獲取應(yīng)用ID和應(yīng)用秘鑰。然后我們需要安裝wx-auth插件，這是一個已經(jīng)封裝好的獲取微信openid的插件。安裝方法如下：

npm install wx-auth -S

安裝好插件后，我們需要對插件進(jìn)行配置。在main.js文件中，引入wx-auth和axios，然后配置插件的AppID和AppSecret信息，并設(shè)置相應(yīng)的回調(diào)地址。

import wxAuth from 'wx-auth'
import axios from 'axios'
wxAuth.config({
//AppID和AppSecret信息
appid: 'your appid',
secret: 'your secret',
//設(shè)置回調(diào)地址
redirect_uri: 'http://localhost:8080/callback'
})
Vue.prototype.$http = axios
Vue.prototype.$wxAuth = wxAuth

接下來，我們需要在vue組件中調(diào)用wxAuth的authorize方法，該方法會先判斷用戶是否已經(jīng)授權(quán)，如果沒有授權(quán)，則會跳轉(zhuǎn)到微信授權(quán)頁面，用戶授權(quán)后頁面會返回code參數(shù)值，接著我們可以使用該code值換取openid。

getUserInfo () {
this.$wxAuth
.authorize()
.then((res) =>{
this.$http.post('/login', { code: res.code }).then((res) =>{
//使用openid進(jìn)行用戶登錄
})
}).catch((err) =>{
console.log('authorize error', err)
})
}

上述代碼中，request請求獲取openid，這個需要在服務(wù)端實(shí)現(xiàn)。接口地址為“/login”，發(fā)送請求時需要傳遞code參數(shù)，服務(wù)端收到請求后通過code值向微信平臺發(fā)送請求，微信平臺會返回openid值，服務(wù)端將openid值返回到前端。

在vue應(yīng)用中獲取微信openid的步驟就是這樣的，簡單又方便。使用wx-auth插件封裝了微信openid的獲取流程，因此我們只需要簡單配置后就可以輕松地在vue應(yīng)用中獲取openid