1、下载组件 wxlogin
npm install vue-wxlogin --save
2、引入组件,给组件传参
4、如果url里面有端口号,微信授权作用里面也要有
5、重定向的url:需要在https://tool.zzvips.com/t/urlencode/中转码
6、微信登录成功后,会自动重定向到新地址,此时的地址栏中就有code参数
7、如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标签,加上这个属性:sandbox=“allow-scripts allow-top-navigation allow-same-origin”
报错内容:
qrconnect?scope=snsapi_login&redirect_uri=http%3a%2f%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href=:84 Unsafe JavaScript attempt to initiate navigation for frame with origin 'http://localhost:9020' from frame with URL '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='. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/features/5851021045661696.```
补充知识:vue移动端微信授权登录插件封装
1.新建wechatAuth.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
const qs = require( 'qs' )
//应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)
const SCOPES = [ 'snsapi_base' , 'snsapi_userinfo' ]
class VueWechatAuthPlugin {
constructor () {
this .appid = null
this .redirect_uri = null
this .scope = SCOPES[1]
this ._code = null
this ._redirect_uri = null
}
install (Vue, options) {
let wechatAuth = this
this .setAppId(options.appid)
Vue.mixin({
created: function () {
this .$wechatAuth = wechatAuth
},
})
}
static makeState () {
return Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
}
setAppId (appid) {
this .appid = appid
}
set redirect_uri (redirect_uri) {
this ._redirect_uri = encodeURIComponent(redirect_uri)
}
get redirect_uri () {
return this ._redirect_uri
}
get state () {
return localStorage.getItem( 'wechat_auth:state' )
}
set state (state) {
localStorage.setItem( 'wechat_auth:state' , state)
}
get authUrl () {
if ( this .appid === null ) {
throw 'appid must not be null'
}
if ( this .redirect_uri === null ) {
throw 'redirect uri must not be null'
}
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) {
let parsedUrl = 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 'You did\'t set state'
}
if (parsedUrl.state === this .state) {
this .state = null
this ._code = parsedUrl.code
} else {
this .state = null
throw `Wrong state: ${parsedUrl.state}`
}
}
}
get code () {
if ( this ._code === null ) {
throw 'Not get the code from wechat server!'
}
// console.log(this)
// console.log('this._code: ' + this._code)
let code = this ._code
this ._code = null
// console.log('code: ' + code)
return code
}
}
const vueWechatAuthPlugin = new VueWechatAuthPlugin()
if ( typeof window !== 'undefined' && window.Vue) {
window.Vue.use(VueWechatAuthPlugin)
}
export default vueWechatAuthPlugin
|
2.main.js中导入
1
2
3
|
import wechatAuth from './plugins/wechatAuth' //微信登录插件
const qs= require( 'qs' );
Vue.use(wechatAuth, {appid: XXXXXXXXX});
|
3.路由钩子中可以进行相关操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
router.beforeEach((to, from, next) => {
if (store.state.loginStatus == 0) {
//微信未授权登录跳转到授权登录页面
let url = window.location.href;
//解决重复登录url添加重复的code与state问题
let parseUrl = qs.parse(url.split( '?' )[1]);
let loginUrl;
if (parseUrl.code && parseUrl.state) {
delete parseUrl.code;
delete parseUrl.state;
loginUrl = `${url.split( '?' )[0]}?${qs.stringify(parseUrl)}`;
} else {
loginUrl = url;
}
wechatAuth.redirect_uri = loginUrl;
store.dispatch( 'setLoginStatus' , 1);
window.location.href = wechatAuth.authUrl
} else if (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-cli 3.x与2.x的demo vue-wechat-login,查看对应分支即可。
2019.7.23更新
代码进行了相关重构 vue-wechat-login
以上这篇vue项目中微信登录的实现操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/my_web_advanced/article/details/107471172