web对接微信获取OpenId

左手的ㄟ右手 2022-10-30 13:23 224阅读 0赞

/* * @Author: hjl * @Date: 2020-08-15 18:10:33 * @LastEditTime: 2020-08-20 20:24:00 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \webchat_project_copy\src\utils\wechatOpenId.js */
    
    import { getUserOpenIdd} from "@/api/apiz" // getUserOpenIdd为后端提供的获取openid接口
    function getUrlKey(name){  //获取url参数
      return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
    }
    function getCodeApi(state,urll){ //获取code
      let urls = urll == undefined || '' ? 'https://web.bethuguard.com/#/wxihome' : urll
      let urlNow= encodeURIComponent(urls);
      let scope='snsapi_userinfo';    //snsapi_userinfo //静默授权 用户无感知 https://xxxxxxxxxxxx'
      let appid='wx93371565ee646f7d'; // 测试appid 根据实际情况替换
      let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${ appid}&redirect_uri=${ urlNow}&response_type=code&scope=${ scope}&state=${ state}#wechat_redirect`;
      window.location.replace(url);
    }
    function getOpenIdApi(code) { 
      getUserOpenIdd(code).then(result => { 
        let {  data: res } = result
        if(res.code == 0){ 
          sessionStorage.setItem('oId',res.data.openid)
        }else{ 
          console.log(res.msg,'获取OpenId错误')
        }
      })
    }
    export const getOpenId = function (next,url) { 
      let code = getUrlKey("code");
      let oId = sessionStorage.getItem('oId')
      if(oId) { 
        next()
      }else { 
        if (code) { 
          console.log('用户授权过直接换openId')
          getOpenIdApi(code)
          next()
        } else { 
          console.log('跳转授权页面')
          getCodeApi("123",url);
        }
      }
    }

在需要获取OpenId的页面导入方法即可：

import { getOpenId } from "@/utils/wechatOpenId" // 引入方法
    
    beforeRouteEnter (to, from, next) {
      getOpenId(next,'http://192.168.124.6:8080/#/userLogin') // url表示重定向地址
    }

在需要获取OpenId的页面导入方法即可：