vue移動端微信授權登錄插件封裝的實例
更新時間:2018年08月28日 09:40:16 作者:小小令
今天小編就為大家分享一篇vue移動端微信授權登錄插件封裝的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
1、新建wechatAuth.js文件
const queryString = require('query-string') //應用授權作用域,snsapi_base (不彈出授權頁面,直接跳轉,只能獲取用戶openid),snsapi_userinfo (彈出授權頁面,可通過openid拿到昵稱、性別、所在地。并且,即使在未關注的情況下,只要用戶授權,也能獲取其信息) 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/oauth2/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 vueWechatAuthPlugin
2、main.js中導入
import wechatAuth from './plugins/wechatAuth'//微信登錄插件 const queryString = require('query-string'); Vue.use(wechatAuth, {appid: XXXXXXXXX});
3、路由鉤子中可以進行相關操作
router.beforeEach((to, from, next) => { if (store.state.loginStatus == 0) { //微信未授權登錄跳轉到授權登錄頁面 let url = window.location.href; //解決重復登錄url添加重復的code與state問題 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移動端微信授權登錄插件封裝的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vs-code/WebStorm中構建Vue項目的實現(xiàn)步驟
本文主要介紹了在Vs-code/WebStorm中構建Vue項目,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08在vue-cli腳手架中配置一個vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個vue-router前端路由的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07