uniapp授权登录

例：小程序首页可以查看，点击某部分需要弹出授权登录框
main.js

const writeUrl = ["/pages/index/index","/pages/order/index","/pages/engin/index","/pages/chat/chatList","/pages/user/index",
]
//设置tabBar白名单
const originalNavigateTo = uni.navigateTo;
const originalReLaunch = uni.reLaunch;
//重写navigate和relaunch
uni.navigateTo = function(options) {const url = options.url;if (writeUrl.some((prefix) => url.startsWith(prefix))) {console.log("navigateTo 白名单 跳转");originalNavigateTo(options);return;}const isLogin = uni.getStorageSync("isLogin")console.log("uni.navigateTo isLogin", isLogin);if (!isLogin) {console.log("navigateTo 没有登录 打开登录的弹窗", options);uni.$emit("showLoginPopup");} else {console.log("登录 跳转");originalNavigateTo(options);}
}uni.reLaunch = function(options) {const url = options.url;if (writeUrl.some((prefix) => url.startsWith(prefix))) {console.log("reLaunch 白名单 跳转");originalReLaunch(options);return;}const isLogin = uni.getStorageSync("isLogin")console.log("uni.navigateTo isLogin", isLogin);if (!isLogin) {console.log("reLaunch 没有登录 打开登录的弹窗");uni.$emit("showLoginPopup");} else {console.log("登录 跳转");originalReLaunch(options);}
}
//满足条件就弹出登录弹窗

App.vue监听

globalData: {userInfo: null,},created() {uni.$on("showLoginPopup", () => {const pages = getCurrentPages();const currentPage = pages[pages.length - 1];console.log("showLoginPopup", currentPage);// #ifdef MP-WEIXINconst popup = currentPage.selectComponent("#wx_login_popup");console.log(popup, 'popup');if (popup) {popup.setData({visible: true})uni.hideTabBar()}// #endif// #ifdef MP-ALIPAYconst popup = currentPage.$selectComponent("#wx_login_popup");if (popup) {popup.setData({visible: true})uni.hideTabBar()}// #endif});uni.$on("closeLoginPopup", () => {const pages = getCurrentPages();const currentPage = pages[pages.length - 1];console.log("closeLoginPopup", currentPage);// #ifdef MP-WEIXINconst popup = currentPage.selectComponent("#wx_login_popup");if (popup) {if (popup) {popup.setData({visible: false})}}});// #endif}//条件编译部分删除会报错

授权弹窗组件部分

<template><view><u-popup :show="visible" round="20" mode="bottom" @open="openWxLogin" @close="goToIndex" :closeable="true":overlay="false"><view class="u-popup-slot"><view class="u-popup-slot_header"><u-image width="50" height="50" mode="aspectFit"src="http://file.benbenyouni.com/static/logo.png"></u-image><u-text :bold="true" size="50rpx" text="奔奔有你"></u-text></view><view class="u-popup-slot_radio"><u-checkbox-group @change="checkboxChange" v-model="value" shape="circle" placement="row"><u-checkbox name="checkbox_agreement" :labelDisabled="false" label="已阅读并同意"></u-checkbox><u-text :bold="true" @click="goToUserAgreement" text="用户协议" mode="text":lineHeight="15"></u-text>|<u-text :bold="true" @click="goToPrivacyPolicy" color="#FF0000" text="隐私政策" mode="text":lineHeight="15"></u-text></u-checkbox-group></view><view class="u-popup-slot_button"><u-button width="300rpx" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhonenumber"shape="circle">一键登录</u-button></view></view></u-popup></view></template><script>
import { wxlogin,getWechatOpenId } from "../common/example";
export default {data() {return {visible: false,value: [],isAgreement: false}},onLoad() {this.visible = true;console.log("<WxLogin />");},methods: {openWxLogin() {this.visible = true;this.isAgreement = false;console.log("isAgreement:", this.isAgreement);console.log("<openWxLogin />");},getPhonenumber(e) {console.log("this.isAgreement", this.isAgreement);if (!this.isAgreement) {uni.showToast({title: '请同意用户协议|隐私政策'})return;}const that = this;if (e.detail.errno == undefined) {wxlogin({code: e.detail.code,}).then(res => {console.log("res", res);if (res.data === "0") {uni.login({provider: 'weixin',success: res1 => {getWechatOpenId({phone: res.phone,code: res1.code,}).then(res2 => {// res.phone = "19999999999"const loginParam = {"loginName": res.phone,"loginPsw": "","loginType": "3","osType": "0"}loginApp({newData: loginParam,}).then(res3 => {let authed_info = JSON.parse(res3.authed_info);console.log("authed_info", authed_info);let data = {...authed_info,bbToken: authed_info.token,userAvatar: authed_info.userAvatarFileName,userRealName: authed_info.nickname,appletOpenId: res2.openId,}data = this.convertObjectKeysToCamelCase(data);console.log("data", data);getApp().globalData.userInfo = data;uni.setStorageSync('userInfo', data)uni.setStorageSync("isLogin", true);uni.$emit("closeLoginPopup");uni.$emit("startBadgeTip");that.$system.refreshCurretPage();});});},fail: () => { },complete: () => { }});} else {setTimeout(() => {uni.navigateTo({url: '/pages/mine/improve-info?phone=' + res.phone})}, 1500)}});}},toCamelCase(str) {return str.replace(/_([a-z])/g, function (match, letter) {return letter.toUpperCase();});},convertObjectKeysToCamelCase(obj) {if (Array.isArray(obj)) {return obj.map(this.convertObjectKeysToCamelCase);} else if (obj !== null && typeof obj === 'object') {return Object.keys(obj).reduce((acc, key) => {const camelKey = this.toCamelCase(key);acc[camelKey] = this.convertObjectKeysToCamelCase(obj[key]);return acc;}, {});}return obj;},checkboxChange(e) {if (e[0] != undefined) {this.isAgreement = true;} else {this.isAgreement = false;}},goToUserAgreement() {uni.navigateTo({url: '/pages/auth/user-agreement'});},goToPrivacyPolicy() {uni.navigateTo({url: '/pages/auth/privacy-policy'});},goToIndex() {this.visible = true;uni.setStorageSync("isLogin", false);uni.removeStorageSync('userInfo');getApp().globalData.userInfo = undefined;uni.$emit("closeLoginPopup");}},}
</script><style scoped>
.p40 {padding: 40rpx;
}.u-popup-slot {width: 100%;height: 650rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.u-popup-slot_header {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 45px;
}.u-popup-slot_radio {margin-bottom: 10px;
}.u-popup-slot_button {width: 550rpx;
}
</style>

最后在使用的页面

<WxLogin id="wx_login_popup" />
//这里引入就不写了，我是在main.js中全局注册的