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

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

npm install wx-auth -S

安裝好插件后，我們需要對插件進行配置。在main.js文件中，引入wx-auth和axios，然后配置插件的AppID和AppSecret信息，并設置相應的回調地址。

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

接下來，我們需要在vue組件中調用wxAuth的authorize方法，該方法會先判斷用戶是否已經授權，如果沒有授權，則會跳轉到微信授權頁面，用戶授權后頁面會返回code參數值，接著我們可以使用該code值換取openid。

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

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

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