【Vue】纯前端实现微信 H5 鉴权

最近在做微信网页版开发，整理出微信 H5 鉴权常见坑位，流程图分析如下，后附简易代码实现

1. 获取code

逻辑实现：通过重定向授权从地址栏拿取 code 并缓存，不可重复调用，不然会报 code used
官方传送门 => 微信开放文档-网页授权

async getAccessToken(redirectUri) {
   
   const code  = $$.getQueryValue('code', redirectUri) || $$.getStore('code')

   if (code) {
   
     const $ticketToken = await $$.setStoreAsync('ticketToken', this.getTicketToken)
     $$.setStore('code', code, true).setStoreAsync('token', this.getAuthToken.bind(this, code))

     return Promise.resolve(this.getConfigInfo($ticketToken, redirectUri))
   } else {
   
     const url = ('https://open.weixin.qq.com/connect/oauth2/authorize?' + $$.serializeParams({
   
       appid,
       redirect_uri: encodeURIComponent(redirectUri),
       response_type: 'code',
       scope: 'snsapi_userinfo',
       state: '200'
     }) + '#wechat_redirect')

     return redirect(url)
   }
 }

2. 获取 ticketToken

逻辑实现：调用https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET, 获取 access_token 并缓存，实现signature 签名

官方传送门 => 微信开放文档-获取access_token

async getTicketToken() {
   
  const {
    access_token } = await get(prefix + '/cgi-bin/token'