wechat-login

基于vue开发的微信单页应用授权插件

依赖

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

使用步骤

1.npm安装

npm i @uutan/wechat-login vue-router axios -S
# axios为选装，可以使用您喜欢的任意ajax库

2.引入wechat-login

import Vue from 'vue'
import VueRouter from 'vue-router'
import wechatLogin from '@uutan/wechat-login';
import axios from 'axios'

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

Vue.use(VueRouter)

// 微信授权插件初始化
Vue.use(WechatLogin , {
  router, // 路由实例对象
  appid: '', // 您的微信appid
  responseType: 'code',  // 返回类型，请填写code
  scope: 'snsapi_userinfo', // 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
  isSaveUrl: true, // 是否保存当前需要授权跳转的地址
  urlSessionStorageName: 'redirct_url', // 保存到sesionStorage的键值名
  redirect_uri: '', // 与isSaveUrl 二选一，isSaveUrl为true时，该值无效 (回调的网址是前端网址，用来使用code交换access_token请求用的)
  getCodeCallback (code, next) {

    // 用户同意授权后回调方法
    // code：用户同意授权后，获得code值
    // code说明： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
    // next： 无论access_token是否获取成功,一定要调用该方法
    // next说明：next方法接收两个参数
    // 参数1为通过code值请求后端获取到的access_token值，如果获取失败请填入空字符串''
    // 参数2(非必填，默认获取access_token切换到当前路由对象)，指定切换对象 next('/') 或者 next({ path: '/' })
    axios.get('api地址，使用code换取access_token和相关数据', {
      params: {code, state: ''},
    }).then(response => {
      let data = response.data;

      // 保存用户信息，建议保存如下数据：
      // openid   来自微信的openid
      // access_token 来自api的权限认证token
      // access_token 来自微信的access_token
      window.sessionStorage.setItem('user', JSON.stringify(data.user));
      
      if (data.code) {
        next('', code);
      } else {
        Toast.fail('授权失败!');
        next('/tip'); // ！！！注意： 获取access_token失败。如果该页也需要授权时，将进入重复授权跳转
      }
    }).catch((e) => {
      Toast.fail('授权失败!');
      next('/tip'); // ajax出现错误
    });

  }
})

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

关于本插件

本插件大量参考vue-wechat-auth 和 vue-wechat-login