基于Vue的单页应用的微信网页授权登录解决思路

微信公众号的微信授权登录，为我们快速导入用户流量提供了极大的便利，我们会选择在发布在微信端的页面中，优先使用微信授权登录，在这次的项目过程中，我们是这样解决微信的网页授权的——

解决思路

代码

• main.js 配置路由前置操作

router.beforeEach((to, from, next) => {
  if (to.path === '/author' && store.state.userInfo.userId) {
    next('/near');
    return false
  }
  if (!(store.state.userInfo.userId) && to.path !== '/author') {
    store.state.toUrl = to.fullPath;
    next('/author');
  }
  if (store.state.userInfo.userId) {
    next();
    return false
  }
  next();
});

• author.vue 授权中间件

mounted(){
 if (this.$store.state.toUrl){
          cooike.set('toUrl',this.$store.state.toUrl)
        }
        if (cooike.get('openid') === null){
            if (this.$route.query.openid){
              this.openid = this.$route.query.openid;
              cooike.set('openid',this.openid,5);
              console.log(this.openid);
            }else{
             window.location.href = '********************';//去后端授权页面
            }
        } else{
          this.openid = cooike.get('openid');
        }
this.$ajax({
          method:'POST',
          url:getToken,
          data:qs.stringify({
            openid:this.openid
          }),
        }).then((resp)=>{
          if (resp.data.errcode==='200'){
              console.log(resp.data.data);
            this.$vux.toast.show({
              text:'授权成功',
              time:1000,
            });
            console.log(resp.data.data.token);
            this.$store.state.token=resp.data.data.token;
            console.log(this.$store.state.token);
            this.$store.state.userInfo.userId=resp.data.data.userInfo.userId;
            this.$store.state.userInfo.nickName=resp.data.data.userInfo.nickName;
            this.$store.state.userInfo.headImg=resp.data.data.userInfo.headImg;
            this.$store.state.userInfo.growthValue=resp.data.data.userInfo.growthValue;
            this.$router.replace(cooike.get('toUrl'));
          }else{
            cooike.delete('openid');
            this.$vux.toast.show({
              text:'已经重置，请重新进入',
              time:2000,
              type:"text",
              position:"bottom"
            })

          }
        });
}

• 后端授权方法

public function auth(){
        $url = $this->_getUrl();
        //echo $url;
        if(!$_GET['code']){
            \LaneWeChat\Core\WeChatOAuth::getCode($url,1,'snsapi_userinfo');
        }
        if($_GET['code']){
            $code = $_GET['code'];
            $arr = \LaneWeChat\Core\WeChatOAuth::getAccessTokenAndOpenId($code);
            $openid = $arr['openid'];
            $access_token = $arr['access_token'];
            $UserModel = M('User');
            $where['openId']=$openid;
            $has = $UserModel ->where($where) ->find();
            $oUtil = new \Base\Controller\UtilController();
            if ($has){
                $token = $oUtil->createToken($has['userid']);
            }else{
                $userInfo = \LaneWeChat\Core\WeChatOAuth::getUserInfo($access_token,$openid);
                $userId = $oUtil->newUserFromWechat($userInfo);
                if ($userId!= null){
                    $token = $oUtil->createToken($userId);
                }else{
                    echo "UnknowError";
                }
            }
            $url = "http://*********/#/author?openid=".$openid;
            header('Location: '.$url, true, 301);
        }
    }
    private function _getUrl() {
        $sys_protocal = isset($_SERVER['SERVER_PORT']) && $_SERVER['SERVER_PORT'] == '443' ? 'https://' : 'http://';
        $php_self = $_SERVER['PHP_SELF'] ? $_SERVER['PHP_SELF'] : $_SERVER['SCRIPT_NAME'];
        $path_info = isset($_SERVER['PATH_INFO']) ? $_SERVER['PATH_INFO'] : '';
        $relate_url = isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : $php_self.(isset($_SERVER['QUERY_STRING']) ? '?'.$_SERVER['QUERY_STRING'] : $path_info);
        return $sys_protocal.(isset($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : '').$relate_url;
    }