WeChat 애플릿의 모든 페이지가 로그인되었는지 확인하는 방법은 무엇입니까? 이 기사에서는 모든 페이지가 로그인되도록 하는 미니 프로그램 방법을 소개합니다. 도움이 되길 바랍니다!
WeChat 미니 프로그램에는 홈 페이지, 개인 페이지, 일부 목록 페이지, 상세 페이지 등이 있습니다. 이러한 페이지는 대부분 공유할 수 있습니다. 다른 사용자가 공유 페이지를 열 때 이 페이지는 사용자가 로그인되어 있는지 어떻게 확인합니까?
요청 패키지에 차단을 추가하는 솔루션이 인터넷에 많이 있습니다. 토큰이 없으면 계속하기 전에 로그인 요청을 호출하여 토큰을 얻으세요. 이 솔루션에는 아무런 문제가 없습니다. 한 페이지에서 동시에 여러 요청이 트리거되면 모든 요청이 차단된 후 배열에 배치됩니다. 한 번에 하나의 요청을 배열합니다.
하지만 이 요구 사항은 좀 더 복잡합니다. 예를 들어 체인 편의점 애플릿의 경우 대부분의 페이지에 매장이 있어야 합니다(현재 매장 제품의 재고, 가격 등을 매장 기준으로 얻어야 하기 때문입니다). . 이 저장소는 인터페이스에서 얻은 현재 위치를 기반으로 백엔드를 호출하므로 현재 요청에 이를 캡슐화하는 것은 너무 번거롭습니다.
Solution
우선, 로그인과 위치 가져오기가 페이지 요청과 비동기화된다는 점을 확인했습니다. 로그인하고 위치를 가져온 후에 페이지 요청이 이루어지도록 해야 합니다. 각 페이지 다시 한번 말하지만 유지 관리성이 너무 낮습니다. 그래서 우리는 이를 수행하는 방법을 추출할 수 있습니다. 그래서 코드는 이렇습니다:
const app = getApp()
Page({
data: {
logs: []
},
onLoad() {
app.commonLogin(()=>{
// 处理页页面请求
})
}
})이렇게 하면 문제가 해결되는 것 같지만, 각 페이지에 대한 onShareAppMessage의 통합 처리와 같은 더 많은 작업을 수행하고 싶지만 하고 싶지 않다면 다시 생각해 보세요. 그리고 각 페이지에 대한 watch를 직접 구현하고 싶습니다.
추가 솔루션
WeChat 애플릿을 볼 수 있습니다. 각 페이지는 Page()입니다. 그런 다음 이 페이지 외부에 셸을 추가하고 MyPage를 사용하여 이 페이지를 대체할 수 있습니다. 더 나아가 코드는 다음과 같습니다.
tool.js 관련 코드
/**
* 处理合并参数
*/
handlePageParamMerge(arg) {
let numargs = arg.length; // 获取被传递参数的数值。
let data = {}
let page = {}
for (let ix in arg) {
let item = arg[ix]
if (item.data && typeof (item.data) === 'object') {
data = Object.assign(data, item.data)
}
if (item.methods && typeof (item.methods) === 'object') {
page = Object.assign(page, item.methods)
} else {
page = Object.assign(page, item)
}
}
page.data = data
return page
}
/***
* 合并页面方法以及数据, 兼容 {data:{}, methods: {}} 或 {data:{}, a:{}, b:{}}
*/
mergePage() {
return this.handlePageParamMerge(arguments)
}
/**
* 处理组件参数合并
*/
handleCompParamMerge(arg) {
let numargs = arg.length; // 获取被传递参数的数值。
let data = {}
let options = {}
let properties = {}
let methods = {}
let comp = {}
for (let ix in arg) {
let item = arg[ix]
// 合并组件的初始数据
if (item.data && typeof (item.data) === 'object') {
data = Object.assign(data, item.data)
}
// 合并组件的属性列表
if (item.properties && typeof (item.properties) === 'object') {
properties = Object.assign(properties, item.properties)
}
// 合组件的方法列表
if (item.methods && typeof (item.methods) === 'object') {
methods = Object.assign(methods, item.methods)
}
if (item.options && typeof (item.options) === 'object') {
options = Object.assign(options, item.options)
}
comp = Object.assign(comp, item)
}
comp.data = data
comp.options = options
comp.properties = properties
comp.methods = methods
return comp
}
/**
* 组件混合 {properties: {}, options: {}, data:{}, methods: {}}
*/
mergeComponent() {
return this.handleCompParamMerge(arguments)
}
/***
* 合成带watch的页面
*/
newPage() {
let options = this.handlePageParamMerge(arguments)
let that = this
let app = getApp()
//增加全局点击登录判断
if (!options.publicCheckLogin){
options.publicCheckLogin = function (e) {
let pages = getCurrentPages()
let page = pages[pages.length - 1]
let dataset = e.currentTarget.dataset
let callback = null
//获取回调方法
if (dataset.callback && typeof (page[dataset.callback]) === "function"){
callback = page[dataset.callback]
}
// console.log('callback>>', callback, app.isRegister())
//判断是否登录
if (callback && app.isRegister()){
callback(e)
}
else{
wx.navigateTo({
url: '/pages/login/login'
})
}
}
}
const { onLoad } = options
options.onLoad = function (arg) {
options.watch && that.setWatcher(this)
onLoad && onLoad.call(this, arg)
}
const { onShow } = options
options.onShow = function (arg) {
if (options.data.noAutoLogin || app.isRegister()) {
onShow && onShow.call(this, arg)
//页面埋点
app.ga({})
}
else {
wx.navigateTo({
url: '/pages/login/login'
})
}
}
return Page(options)
}
/**
* 合成带watch等的组件
*/
newComponent() {
let options = this.handleCompParamMerge(arguments)
let that = this
const { ready } = options
options.ready = function (arg) {
options.watch && that.setWatcher(this)
ready && ready.call(this, arg)
}
return Component(options)
}
/**
* 设置监听器
*/
setWatcher(page) {
let data = page.data;
let watch = page.watch;
Object.keys(watch).forEach(v => {
let key = v.split('.'); // 将watch中的属性以'.'切分成数组
let nowData = data; // 将data赋值给nowData
for (let i = 0; i < key.length - 1; i++) { // 遍历key数组的元素，除了最后一个！
nowData = nowData[key[i]]; // 将nowData指向它的key属性对象
}
let lastKey = key[key.length - 1];
// 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name'
let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法
let deep = watch[v].deep; // 若未设置deep,则为undefine
this.observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey
})
}
/**
* 监听属性 并执行监听函数
*/
observe(obj, key, watchFun, deep, page) {
var val = obj[key];
// 判断deep是true 且 val不能为空 且 typeof val==='object'（数组内数值变化也需要深度监听）
if (deep && val != null && typeof val === 'object') {
Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个key
this.observe(val, childKey, watchFun, deep, page); // 递归调用监听函数
})
}
var that = this;
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set: function (value) {
if (val === value) {
return
}
// 用page对象调用,改变函数内this指向,以便this.data访问data内的属性值
watchFun.call(page, value, val); // value是新值，val是旧值
val = value;
if (deep) { // 若是深度监听,重新监听该对象，以便监听其属性。
that.observe(obj, key, watchFun, deep, page);
}
},
get: function () {
return val;
}
})
}페이지 코드:
app.tool.newPage({
data: {
// noAutoLogin: false
},
onShow: function () {
// 在这里写页面请求逻辑
}
}마지막
코드는 오랫동안 온라인에서 실행되었습니다. 도구에서 newPage 패키지를 따라갈 수 있습니다. . 자신의 요구 사항을 추가하십시오. 간단히 말해서, 더 좋은 아이디어가 있으면 공유해 주시기 바랍니다.
【관련 학습 추천: 미니 프로그램 개발 튜토리얼】
위 내용은 미니 프로그램의 각 페이지가 로그인되었는지 확인하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
