H5微信授权登录弹窗提示

如下图：用户授权登录前，先通过静默授权，拿到token，展示部分信息，用户通过授权后拿到头像昵称，该弹窗让用户有个比较好的体验

请求过程如下：

1、首次在没有UID、code的情况下：静默授权（&scope=snsapi_base）-->微信带回code，App.vue通过code调取服务端接口（code2session）获取token、openid，此时还拿不到用户头像、昵称

2、前端展示页，显示如下图用户授权弹窗，用户点击允许授权（&scope=snsapi_userinfo），同时设置过期时间(还未拿到头像昵称)，调用（code2session）服务端拿到用户头像昵称，微信地址还是会带回code，调用服务端接口获取用户信息。

3、如果用户登录过期时，前端界面通过过期验证弹出出授权弹窗，用户允许授权，直接调用服务端获取用户信息接口即可。

，

展示界面部分代码：

1、标签

2、js

3、css

/**底部授权*/
	.author-view {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: linear-gradient(transparent, #FFF, #FFF, #FFF);
		z-index: 999;
		color: #000;
		padding: 30px 0;
	}

	.author-title-btn {
		background-color: #1373ff;
		color: #fff;
		padding: 10px 70px;
		border-radius: 20px;
		margin-top: 20px;
	}

	.author-title-img {
		width: 50px;
		height: 50px;
		margin-bottom: 10px;
	}

App.vue执行过程

local：地址也要处理下，把微信回调的地址自动拼接的code掉

if (!userId) {
				self.$store.commit('CLEAR_CWZ_USER_INFO')
				if (!code) {
					//新用户进来静默授权
					window.location.href =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						APPID +
						'&redirect_uri=' +
						encodeURIComponent(local) +
						'&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect';
				} else {
					//授权回调，已经拿到code，走code2session
					self.setupWxSDK(APPID, url);
					if (code_local !== code) {
						self.code2Session(code, local)
					} else {
						//点击授权后，拒绝授权，返回上一页重新静默授权
						window.location.href =
							'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
							APPID +
							'&redirect_uri=' +
							encodeURIComponent(local) +
							'&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect';
					}
				}
			} else {
				//有userid的情况
				// TODO 有缓存的用户信息，没有过期，并且信息完全，不需要跳转授权的情况，直接进入系统
				var headimgurl = tool.local.get('headimgurl')
				var nickName = tool.local.get('nickName')

				if (lastLoginDate && headimgurl && nickName) {
					var nowDate = new Date().getTime() // (nowDate - lastLoginDate) 两个时间的毫秒数差值
					//1000毫秒=1秒 60*60*1000代表1小时 ，
					var interval = (nowDate - lastLoginDate) / (60 * 60 * 1000)
					//var interval = (nowDate - lastLoginDate) / (60 * 1000) //测试 大于10秒就算过期
					if (interval >= 24) { // 过期
						//if (interval >= 5) { // 过期

					} else {
						self.setupWxSDK(APPID, url);
						//获取用户信息
						this.selectUserAndGptInfo(userId)
					}
				} else if (code) {
					self.setupWxSDK(APPID, url);
					//授权回调，已经拿到code，走code2session
					if (code_local !== code) { //code唯一，不能重复提交
						tool.local.set('code_local', code)
						self.code2Session(code, local)
					}
				}
			}