如下图：用户授权登录前，先通过静默授权，拿到token，展示部分信息，用户通过授权后拿到头像昵称，该弹窗让用户有个比较好的体验
1、标签
<template>
<!--遮罩-->
<view v-if="showAuth"
style="background-color:rgb(0 0 0 / 8%);position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;"
@click="handelLogin">
<view class="author-view">
<view>
<image class="author-title-img" src="../../static/img/gologin.gif"></image>
</view>
<view>为了让您获得更好浏览体验</view>
<view>请先进行微信授权</view>
<view class="author-title-btn">
<view>去授权</view>
</view>
</view>
</view>
</template>2、js
<script>
import tool from '@/common/utils/tool.js'
export default {
data() {
return {
showAuth: false,
lastLocal: '',
isReplace: false
}
},
methods: {
handelLogin() {
this.$store.commit('CLEAR_CWZ_USER_INFO')
const APPID = this.$config.AppId
var local = window.location.href //tool.local.get('init_local')
var lastLocal = local
let strsArr = local.split('?'); //将字符串内容以&分隔为一个数组
if (strsArr.length >= 2) {
let str_back = local.substr(local.indexOf('?')); //截取?后面的内容作为字符串
let strs = str_back.split('#/'); //将字符串内容以&分隔为一个数组
if (strsArr.length == 2) {
// lastLocal = strsArr[0] + strs[strs.length - 1]
var lastStr = strs[strs.length - 1]
var lastStr_arr = lastStr.split('?')
if (strs.length >= 2) {
lastLocal = strsArr[0] + '#/' + strs[strs.length - 1]
} else {
lastLocal = strsArr[0] + strs[strs.length - 1]
}
} else {
lastLocal = strsArr[0] + '#/' + strs[strs.length - 1]
}
}
//lastLocal :静默授权后回调地址会返回code，当用户同意授权后回调地址还会拼接code，这里将现有路径上的所有的code去掉，再复制给回调地址，以保证code是最新的
// this.$store.commit('CLEAR_CWZ_USER_INFO')
// this.showAuth = false;//允许授权后关闭授权遮罩
var loginDate = new Date().getTime()
tool.local.set('lastLoginDate', loginDate)
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID +
'&redirect_uri=' +
encodeURIComponent(lastLocal) +
'&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect'
},
},
onShow() {
},
mounted() {
//授权获取用户信息
var self = this
var lastLoginDate = tool.local.get('lastLoginDate') //过期时间戳
if (lastLoginDate) { // 已登录过，判断是否过期
var nowDate = new Date().getTime()
var interval = (nowDate - lastLoginDate) / (60 * 60 * 1000)
//var interval = (nowDate - lastLoginDate) / (60 * 1000) //测试 大于10秒就算过期
if (interval >= 24) { // 过期
//if (interval >= 5) { // 过期
this.showAuth = true;
tool.local.del('lastLoginDate')
} else {
this.showAuth = false; //允许授权后关闭授权遮罩
}
} else { // 没有登录过 且还未重定向
//this.$store.commit('CLEAR_CWZ_USER_INFO')
this.showAuth = true;
}
}
}
</script>3、css
<style>
/**底部授权*/
.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;
}
</style>
