志鱼H5项目:vue微信公众号授权插件(二)

vue-wechat-plugin

vue微信公众号授权插件

依赖

基于vue2.0+, vue-router2.0+

使用步骤

1.npm安装

npm i vue-wechat-plugin -S

yarn add vue-wechat-plugin

2.引入

import Vue from 'vue'
import VueRouter from 'vue-router'
import wechatPlugin from 'vue-wechat-plugin'
import axios from 'axios'

// 路由配置
let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      meta: {
        wechatAuth: true // 如果此路由需要微信授权请设置为true,默认为false
      },
    }
  ]
})

Vue.use(VueRouter)

// 微信授权插件初始化
Vue.use(wechatPlugin , {
  router, // 路由实例对象
  appid: '', // 您的微信appid
  responseType: 'code', // 返回类型,请填写code
  scope: 'snsapi_userinfo', // 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)
  redirectUri: 'https://test.com/', //微信回调地址
  getCodeCallback (next, code) {
    // 用户同意授权后回调方法
    // code:用户同意授权后,获得code值
    // code说明: code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。
    // next: 无论access_token是否获取成功,一定要调用该方法
    // next说明:next方法接收两个参数
    // 参数1(必填,切换到的路由地址,空字符串为当前路由,指定切换对象 next('/') 或者 next({ path: '/' })
    // 参数2为通过code值请求后端获取access_token的结果,true或者false,默认为false
    axios.get('通过code值换取access_token后端接口地址', {
      params: {
        code,
        state: ''
      },
    }).then(response => {
      let data = response.data
      let result = data.result; //后端返回的获取accessToken成功或失败,布尔型
      if (result) {
        next('', code); // 获取access_toeken成功
      } else {
        next('/login'); // 获取access_token失败
      }
    }).catch(() => {
      next('/login'); // ajax出现错误
    })
  },
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

参数说明

参数名类型必填默认值说明
routerobjvue-router路由实例
appidstring''微信appid
responseTypestring'code'微信的responsetype
scopestring'snsapi_base'授权作用域
snsapi_base(只能获取基础信息),
snsapi_userinfo(弹出授权获取信息,可以获取更多信息)
redirectUristring''微信回调地址
getCodeCallbackfunction{}回调函数

授权流程

 

关于此插件

由于需要开发公众号,已有插件不能满足需求,遂造轮子 本插件大量参考vue-wechat-auth

 

CTRL+D快速收藏,欢迎常来喔

未经允许不得转载:作者: KingMin, 转载或复制请以 超链接形式 并注明出处 KingMin
原文地址: 《志鱼H5项目:vue微信公众号授权插件(二)》 发布于2020年8月17日

本文链接:志鱼H5项目:vue微信公众号授权插件(二) - https://www.kingmin.cn/h5/16.html

本文标签:

相关推荐
发表评论
1 评论
  • 6个月前 (12-17)
    哈哈哈哈哈