最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue移動端微信授權(quán)登錄插件封裝的實例

 更新時間:2018年08月28日 09:40:16   作者:小小令  
今天小編就為大家分享一篇vue移動端微信授權(quán)登錄插件封裝的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

1、新建wechatAuth.js文件

const queryString = require('query-string')
//應用授權(quán)作用域,snsapi_base (不彈出授權(quán)頁面,直接跳轉(zhuǎn),只能獲取用戶openid),snsapi_userinfo (彈出授權(quán)頁面,可通過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/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、路由鉤子中可以進行相關(guān)操作

router.beforeEach((to, from, next) => {
 if (store.state.loginStatus == 0) {
  //微信未授權(quán)登錄跳轉(zhuǎn)到授權(quán)登錄頁面
  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移動端微信授權(quán)登錄插件封裝的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue中的$set的使用實例代碼

    Vue中的$set的使用實例代碼

    這篇文章主要介紹了Vue中的$set的使用,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-10
  • Vue中rem與postcss-pxtorem的應用詳解

    Vue中rem與postcss-pxtorem的應用詳解

    這篇文章主要介紹了Vue中rem與postcss-pxtorem的應用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • vue實現(xiàn)圖書管理demo詳解

    vue實現(xiàn)圖書管理demo詳解

    這篇文章主要介紹了vue實現(xiàn)圖書管理,分享了圖書管理demo用的知識點,以及遇到問題的總結(jié),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • setTimeout在vue中的正確使用方式

    setTimeout在vue中的正確使用方式

    這篇文章主要介紹了setTimeout在vue中的正確使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 一文詳解Vue如何整合Echarts實現(xiàn)可視化界面

    一文詳解Vue如何整合Echarts實現(xiàn)可視化界面

    ECharts,縮寫來自Enterprise Charts,商業(yè)級數(shù)據(jù)圖表,一個純Javascript的圖表庫,可以流暢的運行在PC和移動設(shè)備上。本文將在Vue中整合Echarts實現(xiàn)可視化界面,感興趣的可以了解一下
    2022-04-04
  • 使用Vue.js和MJML創(chuàng)建響應式電子郵件

    使用Vue.js和MJML創(chuàng)建響應式電子郵件

    這篇文章主要介紹了使用Vue.js和MJML創(chuàng)建響應式電子郵件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03
  • 基于Vue3實現(xiàn)日歷組件的示例代碼

    基于Vue3實現(xiàn)日歷組件的示例代碼

    日歷在很多地方都可以使用的到,這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的日歷控件,文中通過示例代碼講解詳細,需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • Vue項目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)

    Vue項目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)

    在Vue2開發(fā)中,引入vConsole可以為移動端提供類似瀏覽器F12的調(diào)試工具,支持查看日志、網(wǎng)絡請求等功能,vConsole是一個輕量、可拓展的前端調(diào)試面板,與框架無關(guān),適用于多種前端框架,安裝方法包括npm和CDN兩種,可根據(jù)項目環(huán)境配置是否顯示調(diào)試面板
    2024-10-10
  • Vue中使用Canvas實現(xiàn)繪制二維碼

    Vue中使用Canvas實現(xiàn)繪制二維碼

    這篇文章主要為大家詳細介紹了如何在Vue中使用Canvas實現(xiàn)繪制二維碼,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2007-02-02
  • vue-router中query和params的區(qū)別解析

    vue-router中query和params的區(qū)別解析

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應用,這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下
    2022-10-10

最新評論

琼海市| 彝良县| 永康市| 鸡东县| 攀枝花市| 布尔津县| 繁峙县| 苍梧县| 迭部县| 义乌市| 扎赉特旗| 从江县| 永新县| 萨迦县| 紫云| 长阳| 思南县| 五家渠市| 澳门| 枣庄市| 澄江县| 西乌珠穆沁旗| 囊谦县| 大足县| 上高县| 北辰区| 和田市| 北辰区| 金山区| 浦北县| 报价| 福州市| 尉犁县| 错那县| 宣化县| 晋江市| 安乡县| 万源市| 江城| 武山县| 高清|