Vue 微信公众号全局授权 + openid + access token

公众号获取openid的流程
1、获取code：前端先获取当前地址，传给api，api拿到你的当前地址,通过微信提供的接口，返回一个拼接上参数(appid,redirect_uri…)的微信端授权地址，这时候前端跳转该地址显示微信授权页面，用户授权之后携带code跳转到当前页。
2、获取openid：截取地址获取code传递给API，API拿着code向微信服务器请求，获取access_token和openod
3、API端携带access_token再次请求微信服务器，获得用户头像和昵称。并将其存到数据库和缓存，返回token

main.js中做路由拦截

router.beforeEach((to, from, next) => { 
  const token = localStorage.getItem('token')  
  const openid = localStorage.getItem('openid')   
  if (!openid && !token) {
    if (to.path === '/auth') { 
      next()
    } else {  
      localStorage.setItem('now_url',to.fullPath) //当前页url与参数放入缓存
      next('/auth')
    } 
  } else { 
    next()
  }
}) 

授权页面

参考：http://www.ruhuashop.com

image