login.vue
<template>
<view class="personal_page">
<navBar :title="topInfo.title" :url="topInfo.url" :type="topInfo.type" :icon_title="topInfo.icon_title">
</navBar>
<!-- <text>获得你的公开信息(昵称，头像等)</text> -->
<!-- 是否登录 -->
<uni-popup ref="popup">
<view class="login_box">
<view class="title">为了您更好的用户体验，请授权登录</view>
<view class="operate">
<button @click="closeProp">取消</button>
<button class="login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import navBar from "@/components/navBar/navBar.vue"
export default {
components: {
navBar
},
data() {
return {
topInfo: {
url: "",
title: "授权登录",
icon_title: "",
type: 'tab'
},
wxCode: "",
sessionKey: {},
isHide: true
}
},
onLoad(option) {},
onShow() {
let token = uni.setStorageSync("token");
console.log('token', token);
if (!token) {
this.wxLogin();
}
},
methods: {
/* 是否登录 */
wxLogin() {
let _this = this;
uni.login({
provider: "weixin",
success: (res) => {
console.log("res", res)
if (res.errMsg.indexOf("ok") != -1) {
this.wxCode = res.code;
// _this.getOpenid();
uni.showModal({
title: '温馨提示',
content: '亲，授权微信登录后才能正常使用小程序功能',
success(res) {
console.log(0)
console.log(res)
//如果用户点击了确定按钮
if (res.confirm) {
uni.getUserProfile({
desc: '获取你的昵称、头像、地区及性别',
success: (res) => {
console.log("获取昵称", res);
let _res = _this.$myRequset({
url: "/api",
method: "POST",
data: {
operate: "user.WxDecode",
code: _this.wxCode,
encryptedData: res
.encryptedData,
iv: res.iv,
signature: res.signature,
rawData: res.rawData
},
}).then((res) => {
console.log("解码", res);
_this.sessionKey = res.data
.data;
_this.isLogin();
_this.getPhoneNumber();
});
},
fail: res => {
//拒绝授权
uni.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
} else if (res.cancel) {
//如果用户点击了取消按钮
console.log(3);
uni.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
uni.switchTab({
url:"../index/index"
});
return;
}
}
});
} else {
uni.showToast({
title: "获取code失败",
duration: 2000,
icon: "none"
})
}
},
fail: (res) => {
uni.showToast({
title: "登录失败",
duration: 2000,
icon: "none"
})
_this.back();
}
})
},
isLogin() {
this.$refs.popup.open();
},
closeProp() {
this.$refs.popup.close();
this.isLogin();
},
/* 用户授权手机号 */
async getPhoneNumber(e) {
let _this = this;
try{
let _msg = e.detail.errMsg;
if (_msg == "getPhoneNumber:ok") {
// 获取手机号
this.$refs.popup.close();
let res = await this.$myRequset({
url: "/api",
method: "POST",
data: {
operate: "user.get_Phone",
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
sessionKey: this.sessionKey.session_key,
openid: this.sessionKey.openid
},
});
console.log('获取手机号', res);
if (res.data.code == 1) {
let token = await this.$myRequset({
url: "/api/user/mobilelogin",
method: "POST",
data: {
mobile: res.data.data.phoneNumber,
captcha: 123
},
});
console.log('token', token)
uni.setStorageSync("token", token.data.data.userinfo.token);
uni.switchTab({
url:"../index/index"
});
}
} else {
this.isLogin(); // 重新要求授权
}
}catch{}
},
}
}
</script>
<style>
@import url("login.css");
</style>
main.js
Vue.prototype.checkLogin = function(){
const token = uni.getStorageSync('token')
if(token === ''){ // 本地没有token表示未登录
console.log('未登录返回到登录页')
uni.reLaunch({url:'/pages/login/login'})
return false
}
return token;
}
使用token
personal.vue
onShow() {
let loginRes = this.checkLogin();
console.log('loginRes', )
if (!loginRes) {
return false;
} else {
this.token = uni.getStorageSync("token");
this.getUserInfo();
}
},
此流程为进去指定页面时需要用户登录，则判断是否登录，没有登录时跳转至login页面授权登录后先自动跳转首页。用户体验有些许欠缺，若有同行大神有其他更好的实现方式敬请告知，一起探讨哦。。。。。。。。。。。。。