公众号网页获取openid

前端需要做的事

1. App.vue：监听路由，如果发生变化，就去localStorage里检查token，如果没有token，即没有进行授权。同时，如果路由不是授权页面，那么需要进行跳转到授权页面进行授权。

   // App.vue
   watch: {
       '$route' () {
         const token = localStorage.getItem('token')
         if (this.$route.path === '/auth' || this.$route.path === '/') {
             return
         }
         if (token === '' || !token) {
           localStorage.setItem('backPath', this.$route.path)
           this.$router.replace({path: `/auth`})
         }
       }
     },
         
   

   tips:

   1. 可以在第一个 if 判断里来筛选不需要授权的路由。
   2. 存储 backPath 是为了授权完成后返回。

2. Auth.vue：在创建时，检查url中是否有token，如果没有，将路由设置为授权链接；如果有，则把token存起来，再跳转到授权前的页面。

     created() {
       setTimeout(()=>{
         this.timeOut = true
       },10000)
       const token = getUrlKey("token")
       if (token) {
         localStorage.setItem('token', token);
         let backPath = localStorage.getItem('backPath')
         if(!backPath || backPath === '/'||backPath==='/auth'){
           backPath = '/register'
         }
         this.$toast.loading({
           message: '正在为您跳转...',
           forbidClick: true,
         });
         setTimeout(() => {
           this.$router.replace({path: backPath, query: {}})
         }, 618)
       } else {
         // console.log("去腾讯授权")
         setTimeout(() => {
           window.location.href = `youauthapi?state=${window.location.href}`
         }, 1000)
       }
     },
   

   tips:

   1. 授权链接中需要把当前的url拼接到state中，授权完成才能回到授权页面。
   2. 可以添加一个timeout用来进行授权失败处理。

后端需要做的事

1. 解析授权api传过来的请求。youauthapi?state=${window.location.href}
2. 拼接微信授权URL：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec
3. 返回重定向响应，目标为拼接的微信授权URL。

用户体验

1. 打开网页（app.vue）。
2. 网页加载完成，发生跳转，跳转到空白页面（auth.vue），弹出loading，提示正在登录。
3. 再次跳转（open.weixin.qq.com）,弹出微信授权框。
4. 点击授权，跳转到空白页面（auth.vue），提示正在为您跳转…。
5. 跳转到最初的网页（app.vue）。