vue项目中微信登录的实现操作
1、下载组件wxlogin
npminstallvue-wxlogin--save
2、引入组件，给组件传参
3、重定向的url应该是微信登录官网中的微信授权作用域
4、如果url里面有端口号，微信授权作用里面也要有
5、重定向的url：需要在http://tool.chinaz.com/tools/urlencode.aspx中转码
6、微信登录成功后，会自动重定向到新地址，此时的地址栏中就有code参数
7、如果报错说不能从组件跳到页面，那就找到wxlogin组件里面的iframe标签，加上这个属性：sandbox=“allow-scriptsallow-top-navigationallow-same-origin”
报错内容：
qrconnect?scope=snsapi_login&redirect_uri=http%3a%2f%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href=:84UnsafeJavaScriptattempttoinitiatenavigationforframewithorigin'http://localhost:9020'fromframewithURL'https://open.weixin.qq.com/connect/qrconnect?app&scope=snsapi_login&redirect_uri=http%3a%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href='.Theframeattemptingnavigationistargetingitstop-levelwindow,butisneithersame-originwithitstargetnorhasitreceivedausergesture.Seehttps://www.chromestatus.com/features/5851021045661696.```
补充知识：vue移动端微信授权登录插件封装
1.新建wechatAuth.js文件
constqs=require('qs')
//应用授权作用域，snsapi_base（不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo（弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
constSCOPES=['snsapi_base','snsapi_userinfo']
classVueWechatAuthPlugin{
constructor(){
this.appid=null
this.redirect_uri=null
this.scope=SCOPES[1]
this._code=null
this._redirect_uri=null
}
install(Vue,options){
letwechatAuth=this
this.setAppId(options.appid)
Vue.mixin({
created:function(){
this.$wechatAuth=wechatAuth
},
})
}
staticmakeState(){
returnMath.random().toString(36).substring(2,15)+
Math.random().toString(36).substring(2,15)
}
setAppId(appid){
this.appid=appid
}
setredirect_uri(redirect_uri){
this._redirect_uri=encodeURIComponent(redirect_uri)
}
getredirect_uri(){
returnthis._redirect_uri
}
getstate(){
returnlocalStorage.getItem('wechat_auth:state')
}
setstate(state){
localStorage.setItem('wechat_auth:state',state)
}
getauthUrl(){
if(this.appid===null){
throw'appidmustnotbenull'
}
if(this.redirect_uri===null){
throw'redirecturimustnotbenull'
}
this.state=VueWechatAuthPlugin.makeState()
return`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`
}
returnFromWechat(redirect_uri){
letparsedUrl=qs.parse(redirect_uri.split('?')[1])
if(process.env.NODE_ENV==='development'){
//console.log('parsedUrl:',parsedUrl)
this.state=null
this._code=parsedUrl.code
}else{
if(this.state===null){
throw'Youdid\'tsetstate'
}
if(parsedUrl.state===this.state){
this.state=null
this._code=parsedUrl.code
}else{
this.state=null
throw`Wrongstate:${parsedUrl.state}`
}
}
}
getcode(){
if(this._code===null){
throw'Notgetthecodefromwechatserver!'
}
//console.log(this)
//console.log('this._code:'+this._code)
letcode=this._code
this._code=null
//console.log('code:'+code)
returncode
}
}
constvueWechatAuthPlugin=newVueWechatAuthPlugin()
if(typeofwindow!=='undefined'&&window.Vue){
window.Vue.use(VueWechatAuthPlugin)
}
exportdefaultvueWechatAuthPlugin
2.main.js中导入
importwechatAuthfrom'./plugins/wechatAuth'//微信登录插件
constqs=require('qs');
Vue.use(wechatAuth,{appid:XXXXXXXXX});
3.路由钩子中可以进行相关操作
router.beforeEach((to,from,next)=>{
if(store.state.loginStatus==0){
//微信未授权登录跳转到授权登录页面
leturl=window.location.href;
//解决重复登录url添加重复的code与state问题
letparseUrl=qs.parse(url.split('?')[1]);
letloginUrl;
if(parseUrl.code&&parseUrl.state){
deleteparseUrl.code;
deleteparseUrl.state;
loginUrl=`${url.split('?')[0]}?${qs.stringify(parseUrl)}`;
}else{
loginUrl=url;
}
wechatAuth.redirect_uri=loginUrl;
store.dispatch('setLoginStatus',1);
window.location.href=wechatAuth.authUrl
}elseif(store.state.loginStatus==1){
try{
wechatAuth.returnFromWechat(to.fullPath);
}catch(err){
store.dispatch('setLoginStatus',0)
next()
}
store.dispatch('loginWechatAuth',wechatAuth.code).then((res)=>{
if(res.status==1){
store.dispatch('setLoginStatus',2)
}else{
store.dispatch('setLoginStatus',0)
}
next()
}).catch((err)=>{
next()
})
}else{
next()
}
});
2018.8.31更新
更新微信授权登录vue-cli3.x与2.x的demovue-wechat-login，查看对应分支即可。
2019.7.23更新
代码进行了相关重构vue-wechat-login
以上这篇vue项目中微信登录的实现操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。