最近算是把微信授权，sdk，接触了一边了，所以准备写一个系列；

• 微信授权
• 微信SDK的使用，例如分享等功能
• 小程序授权
• 小程序微信支付
• 小程序模板消息

不要问我为什么后面是小程序微信支付，小程序模板消息，因为普通微信公众号项目的更本不需要前端去操作太多，直接调取后台接口就可以完成。

##Vue微信授权
这里我们用的是Vue全家桶开发先上一张微信授权流程图片吧：

你可以尝试着跟着这个流程图走一遍逻辑，在开始动手和后台商量。
我这里大概的授权逻辑是：

• 路由拦截：利用Vue路由拦截,判断用户登录状态（后面向后台请求的时候，让后台返回），如果是登录状态就next(),否则去授权页（这里提示一下，我弄了一个空白页用来授权用的author.vue）
  下面
• 获取code：前端先获取当前地址，传给后台,后台拿到你的当前地址,通过微信提供的接口，返回一个拼接上参数(appid,redirect_uri…)的微信端授权地址，这时候前端跳转该地址显示微信授权页面，用户授权之后拿到带有code的地址。
• 获取openid：截取地址获取code传递给后台，后台拿着code向微信服务器请求，获取access_token和openod并且存到数据库，返回有用的数据。

这里是后台返回的微信授权页地址：

返回带有code的地址，正则截取获得code,截取方法下面有：

下面是我router拦截、axios配置和授权页的代码和注释

router拦截

router.beforeEach((to, from, next) => {
  document.title = to.meta.title		//修改各个页面的title
  var uid = getUid()		//获取uid 
  if (!uid) {
    if (to.path === '/author') {
      next()
    } else {
      setToUrl(to.fullPath)
      next('/author')
    }
    // window.location.href = 'http://hytera.cct.work/dist/#/author'
  } else {
    next()
  }
})

axios配置

import axios from 'axios'
import qs from 'qs'
import { getToken, setToken } from '../lib/util'

const ajaxUrl = process.env.NODE_ENV === 'development'
  // 测试环境api接口
  ? '/'
  // 线上环境api接口
  : 'http://wenlian.cct.work'

axios.defaults.headers.common['Source'] = '1'
const newAxios = axios.create({
  baseURL: ajaxUrl,
  timeout: 5000
})

// 添加请求拦截器
newAxios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 获取token
  const token = getToken()
  if (token) {
    config.headers.common['Authorization'] = `Bearer ${token}`
    // 在post请求发送出去之前，对其进行编码
    if (config.method === 'post') {
      config.data = qs.stringify(config.data)
    }
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return error
})

// 添加响应拦截器
newAxios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  let newToken = response.headers['new-token']
  if (newToken) {
    setToken(newToken)
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  return error
})

export default {
  post (url, data) {
    return newAxios({
      method: 'post',
      url: url,
      data: data
    })
  },

  get (url, params) {
    return newAxios({
      method: 'get',
      url: url,
      params
    })
  },

  delete (url, params) {
    return newAxios({
      method: 'delete',
      url: url,
      params
    })
  },

  put (url, data) {
    return newAxios({
      method: 'put',
      url: url,
      data: data
    })
  }
}

授权页

import {getToUrl, setToken, setUid} from '../assets/lib/util'	// 封装的缓存方法
var url = getToUrl()
export default {
  created () {
    var code = this.GetUrlParame('code')			// 截取code
    console.log(code)
    if (!code) {
      var domine = window.location.href.split('#')[0]   // 微信会自动识别#    并且清除#后面的内容
      this.$http.post('/OAutho/OAuthUrl?Ourl=' + domine)  // 如果没有code，说明用户还没授权   将当前地址传递给后台
        .then(res => {
          // 正则处理后台返回的链接
          var url = /http\S*t/g.exec(res.data.url)
          url = url[0].replace(/\\u0026/g, '&')
          window.location.href = url
        })
    } else {
      this.$http.post('/OAutho/OAuthHandle?code=' + code) //如果有code，说明用户点击了授权  将获取到的code传递给后台
        .then(res => {
          // 返回状态和UId
          console.log(res.data)
          this.uid = res.data.UId
          setUid(this.uid)
           if (res.data.status && this.uid) {
              window.location.replace('http://wenlian.cct.work/dist/#' + url)
           }
        })
    }
  },
  data () {
    return {
      uid: ''
    }
  },
  methods: {
    // 截取code
    GetUrlParame (parameName) {
      /// 获取地址栏指定参数的值
      /// <param name="parameName">参数名</param>
      // 获取url中跟在问号后面的部分
      var parames = window.location.search
      // 检测参数是否存在
      if (parames.indexOf(parameName) > -1) {
        var parameValue = ''
        parameValue = parames.substring(parames.indexOf(parameName), parames.length)
        // 检测后面是否还有参数
        if (parameValue.indexOf('&') > -1) {
          // 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
          parameValue = parameValue.substring(0, parameValue.indexOf('&'))
          // 去掉参数名, 得到最终纯值字符串
          parameValue = parameValue.replace(parameName + '=', '')
          return parameValue
        }
        return ''
      }
    }
  }
}

可能我的授权办法有点蠢，后面有更好的办法在修改，有不好的地方，可以优化的地方，大佬看客还希望指点出来。我改

↓↓↓

↓↓

↓

其他相关微信系列

【Vue】Vue微信JS-SDK分享（系列二）