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

解决思路

代码

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; }

作者：AiDede

來源：简书