小編給大家分享一下vue移動(dòng)端如何實(shí)現(xiàn)微信授權(quán)登錄插件封裝，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、新建wechatAuth.js文件
重慶分公司
重慶分公司
const queryString = require('query-string')
//應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁(yè)面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁(yè)面，可通過(guò)openid拿到昵稱、性別、所在地。并且，即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息）
const SCOPES = ['snsapi_base', 'snsapi_userinfo']
class VueWechatAuthPlugin {
install(Vue, options) {
let wechatAuth = this
this.setAppId(options.appid)
Vue.mixin({
created: function () {
this.$wechatAuth = wechatAuth
}
})
}
constructor() {
this.appid = null
this.redirect_uri = null
this.scope = SCOPES[1]
this._code = null
this._redirect_uri = null
}
static makeState() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
}
setAppId(appid) {
this.appid = appid
}
set redirect_uri(redirect_uri) {
this._redirect_uri = encodeURIComponent(redirect_uri)
}
get redirect_uri() {
return this._redirect_uri
}
get state() {
return localStorage.getItem("wechat_auth:state")
}
set state(state) {
localStorage.setItem("wechat_auth:state", state)
}
get authUrl() {
if (this.appid === null) {
throw "appid must not be null"
}
if (this.redirect_uri === null) {
throw "redirect uri must not be null"
}
this.state = VueWechatAuthPlugin.makeState()
return `https://open.weixin.qq.com/connect/oauth3/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`
}
returnFromWechat(redirect_uri) {
let parsedUrl = queryString.parse(redirect_uri.split('?')[1])
if (process.env.NODE_ENV === 'development') {
// console.log('parsedUrl: ', parsedUrl)
this.state = null
this._code = parsedUrl.code
} else {
if (this.state === null) {
throw "You did't set state"
}
if (parsedUrl.state === this.state) {
this.state = null
this._code = parsedUrl.code
} else {
this.state = null
throw `Wrong state: ${parsedUrl.state}`
}
}
}
get code() {
if (this._code === null) {
throw "Not get the code from wechat server!"
}
// console.log(this)
// console.log('this._code: ' + this._code)
let code = this._code
this._code = null
// console.log('code: ' + code)
return code
}
}
const vueWechatAuthPlugin = new VueWechatAuthPlugin()
export default vueWechatAuthPlugin2、main.js中導(dǎo)入
import wechatAuth from './plugins/wechatAuth'//微信登錄插件
const queryString = require('query-string');
Vue.use(wechatAuth, {appid: XXXXXXXXX});3、路由鉤子中可以進(jìn)行相關(guān)操作
router.beforeEach((to, from, next) => {
if (store.state.loginStatus == 0) {
//微信未授權(quán)登錄跳轉(zhuǎn)到授權(quán)登錄頁(yè)面
let url = window.location.href;
//解決重復(fù)登錄url添加重復(fù)的code與state問(wèn)題
let parseUrl = queryString.parse(url.split('?')[1]);
let loginUrl;
if (parseUrl.code && parseUrl.state) {
delete parseUrl.code;
delete parseUrl.state;
loginUrl = `${url.split('?')[0]}?${queryString.stringify(parseUrl)}`;
} else {
loginUrl = url;
}
wechatAuth.redirect_uri = loginUrl;
store.dispatch('setLoginStatus', 1);
window.location.href = wechatAuth.authUrl
} else if (store.state.loginStatus == 1) {
try {
wechatAuth.returnFromWechat(to.fullPath);
} catch (err) {
store.dispatch('setLoginStatus', 0)
next()
}
store.dispatch('loginWechatAuth', wechatAuth.code).then((res) => {
if (res.status == 1) {
store.dispatch('setLoginStatus', 2)
} else {
store.dispatch('setLoginStatus', 0)
}
next()
}).catch((err) => {
next()
})
}else {
next()
}
});以上是“vue移動(dòng)端如何實(shí)現(xiàn)微信授權(quán)登錄插件封裝”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
