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"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移动端微信授权登录插件封装的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。