HBuilder mui登录和访问控制教程

2023-11-09

HBuilder mui登录和访问控制教程

mui中提供了登录的模板页,但是对于登录后各个页面的访问控制,刷新等并没有官方的推荐方案。我在这里简单说一种初级的解决方案吧,肯定有不足指出,欢迎批评指正。

第一节中创建移动APP项目的时候选择的是"mui项目",只引入了默认的js和css等文件,没有登录模板。要使用默认登录模板,可以创建的时候选择"mui登录模板"。现在创建一个名为muiLogin的"mui登录模板"项目:
在这里插入图片描述
可以看到这次多了不少东西。通过manifest.json可以发现,入口文件时login.html,我们就从login.html开始。

从plusReady函数开始看起。
在这里插入图片描述
先通过.preload预加载了main.html(就是mui,这是个闭包函数,mui作为参数$传进来的,详情百度JavaScript 闭包)。

toMain跳转主页面更新用户信息
然后是一个跳转到主页面的toMain函数,可以看到这里监听了main页面的loaded事件,当main加载完毕后,这里就将标志向量main_loaded_flag置为true,toMain中循环判断这个变量,当这里为true时,触发main的show事件,然后在main中,show事件的响应函数从app.getState()中读取用户名,显示在界面。这就完成了用户登录后主界面的用户名显示。

app.getState和app.setState
上面用到了app.getState(),这是定义在js/app.js中的,不妨去看下都做了什么。
在这里插入图片描述
在这里插入图片描述
可以看到这两个是对localStorage的存取做了封装,是一个字典对象,这是个很不错的想法,可以将用户登录后的所有状态信息记录在state里面,包括用户信息,是否自动登录,用户余额,订单列表页的最新和最旧ID等都保存下来,用户注销后直接把state置为null就可以了,再次登录后再设置state。

上面的登录就是这样做的,登录成功后保存用户信息在state里面,然后触发涉及用户的main页面的事件,main页面里自定义事件的响应函数可以从state里读取信息并更新。

登录部分
登录这里先判断了是否运行自动登录以及是否设置了手势解锁。然后按情况决定是手势解锁还是直接登录或者显示登录界面。

点击登录按钮后,会调用app的login函数验证登录信息,验证正确就会调用toMain跳转到主页面。

访问控制
登陆部分很明了,但是大部分app是允许用户在不登录的情况下浏览部分页面的,如果用户访问的页面需要登录再自动跳转到登录页面。

这里就需要对登录验证做个封装,毕竟每次验证页面的时候,都从state里面判断一下用户是否登录了,以及是否允许自动登录,自动登录是否成功,是否显示登录界面是件很麻烦的事。

在这里插入图片描述

我们希望达到这种效果,如果用户点击"我的"页面,通过以下代码自动进行访问控制:
mui(’#my’)[0].addEventListener(‘tap’,function(){
app.loginRequired(function(){
mui.openWindow({
url:‘my.html’,
id:‘my’
});
});
});

只多了一行:app.loginRequired,如果某个页面需要登录才能访问,就把登录后执行的代码作为回调函数传给app.loginRequired,由它进行自动登录和登录不成功的跳转。
/**

  • 要求登陆后才能执行回调函数
  • @param {Object} callback 已登录或自动登录成功执行,否则跳转到登录界面
    */
    owner.loginRequired=function(callback){
    var state=owner.getState();
    if(state.isLogin){//已登录,直接执行
    callback();
    }else{
    owner.tryAutoLogin(function(data){
    if(data.Code==1){//自动登录成功则执行回调函数
    callback();
    }else{//自动登录失败,显示登录页面
    var v=plus.webview.getWebviewById(‘login’);
    if(!v){
    mui.toast(‘error:cannot find login’);
    }else{
    v.show(‘slide-in-right’,300);
    }
    }
    });
    }
    };

    为了确保上面能找到登录页面,需要先预加载login页面,由于主页面是main,不再是login了,可以在main里面预加载login.html,然后这里就会找到login的webview

看到里面调用了一个tryAutoLogin的自动登录函数,这个函数尝试用保存在state中的上次登录信息自动ajax请求服务器登录。
/**

  • 尝试自动登录

  • @param {Function} callback 回调函数,接收一个字典参数data,data.Code>0表示登录成功
    /
    owner.tryAutoLogin=function (callback){
    var state=owner.getState();
    if(state.isLogin){
    callback({Code:1});
    return;
    }
    var user=JSON.parse(localStorage.getItem(’$user’));
    //需要在登录或注册成功时将用户信息保存在localStorage中
    var settings=owner.getSettings();
    if (settings.autoLogin&&user&&user.name) {
    owner.login(user,callback);
    }else{
    callback({Code:-1});
    }
    }

    tryAutoLogin的主要工作就是判断是否允许自动登录,如果允许就调用login方法尝试登录,并将回调函数也传递过去。
    /
    *

  • 用户登录
    **/
    owner.login = function(loginInfo, callback) {
    callback = callback || $.noop;
    loginInfo.Method=‘Login’;//告诉服务器执行哪个函数
    KaTeX parse error: Expected '}', got 'EOF' at end of input: …orage.setItem('user’, JSON.stringify(loginInfo));

             //通知资金变动页面刷新
             var moneyChange=plus.webview.getWebviewById('moneyChange');
             if(moneyChange){
                 mui.fire(moneyChange,'show');
             }
             //通知其他用户相关页面更新
         }
         callback(data);
     },
     error:function(msg){
         callback({
             Code:-3,
             Msg:'无法连接到服务器'
         });
     }
    

    });
    };

    login函数中有一句是defaultState,这个就是存储的默认用户状态,用户注销再次登录后就应该用这个替换上次用户的状态。防止信息错乱。

通过以上三个函数,就完成了页面登录的自动验证和访问控制,使得整体逻辑比较清晰,代码如有bug欢迎指正。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HBuilder mui登录和访问控制教程 的相关文章

  • 卷积核的类型及其作用

    目录 一 堆叠小卷积核 1 为什么要用大卷积核代替小卷积核 2 为什么堆叠小卷积核参数量要比大卷积核少 3 输入输出图片通道数一致时堆叠小卷积核参数量才更小 4 感受野计算 二 空洞卷积 能否让固定大小的卷积核看到更大范围的区域 三 非对称

随机推荐

  • c语言中的std模版用法,C++模板template用法小结(推荐)

    引言 模板 Template 指C 程序设计设计语言中采用类型作为参数的程序设计 支持通用程序设计 C 的标准库提供许多有用的函数大多结合了模板的观念 如STL以及IO Stream 函数模板 在c 入门中 很多人会接触swap int i
  • vue的安全隐患(一)

    vue安全方面的知识 第一原则永远不要使用不信任的模板 在vue中使用不信任的模板这等于允许在应用程序中执行任意的javascript代码 甚至更糟糕的是服务器可能会被攻破 比如在 template sertppp 不要这样做因为vue的模
  • 强化学习的几种环境介绍

    前言 对于强化学习相关的几种环境介绍 主要包括Mini world Gym maze Grid world gym minigrid Mini world https github com maximecb gym miniworld Mi
  • 用c语言设计加减乘除自动出题程序,用C语言编写一个简易计算器可实现加减乘除,连加连减,连乖连除....

    include include stdlib h define N 10 void fun int a b t char c scanf d a scanf c c scanf d b if c c c c c if c t a b if
  • 关于unique case和priority case语法

    SystemVerilog对于case casez casex语句新增了两个特殊的修饰符 unique及priority 其语法规则如下 unique case
  • 疫情信息获取。

    爬取目标 腾讯新闻 疫情数据 确定信息 在目标网页按F12 在全局数据中寻找 发现有目标数据 接下来在Network中寻找数据并在Headers中获得链接地址 也可以点击搜索查找 较为方便 省份数据和全球数据也是同样的方法 注意图二 最终确
  • 【JS逆向】之webpack逆向实战

    声明 本文只作学习研究 禁止用于非法用途 否则后果自负 如有侵权 请告知删除 谢谢 目标网站 aHR0cHM6Ly8xNTE0NjQ2LmNvbS9sb2dpbg 引言 webpack对于有研究过人的来说就是 难度并不是很高 但是因为web
  • xss过滤绕过方法总结

    xss注入常用语句 1 2 img src 3 img src 4
  • JS 将数组写入表单

    将数据写入表单 var rowData 1 2 3 function insertToForm rowData if rowData length lt 1 alert 没有数据 else var form formID for var i
  • C++中的类模板定义及实例化

    转载自Out man 文章目录 一 类模板定义及实例化 定义一个类模板 类模板实例化 二 类模板的成员函数 一 类模板定义及实例化 定义一个类模板 template
  • 关于C/C++运算符优先级问题探讨

    最近在知乎上看到一个c c 运算符连写的问题 引发了诸多网友的讨论 具体内容如下图 乍一看 这句代码很长 确实有些让人糊涂 尤其是学习过python的同学 对此写法不太理解 今天我们一起来说一说 优先级 在c语言的表达式中 如果存在多个运算
  • 第1章-爬虫简介(http请求)

    第1章 爬虫简介 一 通讯协议 二 网络模型 三 Http请求与响应 3 1 Http通信 3 2 Http请求 3 3 Http请求方法 四 几个概念 4 1 GET和POST 4 2 URL组成部分 4 3 User Agent 户代理
  • 基于Linux环境的PPPOE服务器搭建

    转载 https www imooc com article 50559 VMware ubuntu虚拟机上搭建PPPOE服务器 https blog csdn net rheostat article details 8069778
  • 随手记怎么样靠谱吗?随手记平台不触碰用户资金

    随着经济的快速发展和人们理财意识的增强 互联网理财在人们的日常生活中逐步普及 而随手记作为随手集团旗下集手机记账 财务规划 金融服务 社区投资者教育等功能于一体的个人财务管理和金融服务品牌 其推出的理财产品受到不少理财投资者的青睐 但是 随
  • 什么是渲染目标(render target)&& 渲染到纹理(Render To Texture, RTT)详解

    渲染到纹理 Render To Texture RTT 详解 RTT是现在很多特效里面都会用到的一项很基本的技术 实现起来很简单 也很重要 但是让人不解的是网上搜索了半天只找到很少的文章说这个事儿 不知道是因为太简单还是因为这项技术已经出现
  • docker安装觅思文档(mrdoc)

    mrdoc文档地址 https mrdoc fun doc 18 mrdoc项目地址 GitHub zmister2016 MrDoc mrdoc online document system developed based on pyth
  • STM32逆变器控制

    ADC引脚分配 直流电压 Vc1 PA0 Vc2 PA1 电网电压 U1 V1 W1 AD7323 PB3 PB4 PB5 逆变器输出电压 UCA UCB UCC AD7323 PB13 PB14 PB15 电容电流采样 ICa ICb I
  • Mybatis解释及Mybatis项目搭建

    一 什么是Mybatis MyBatis是一个持久层框架 属于JDBC的替代方案之一 他的前身是iBatis 它属于ORM关系型映射 ORM O R Mapping 对象关系映射 是一种把内存中的对象保存到关系型数据库的技术 用它封装数据库
  • jmeter报错:jmeter java.net.SocketException: Connection reset

    jmeter java net SocketException Connection reset 网络慢 导致
  • HBuilder mui登录和访问控制教程

    HBuilder mui登录和访问控制教程 mui中提供了登录的模板页 但是对于登录后各个页面的访问控制 刷新等并没有官方的推荐方案 我在这里简单说一种初级的解决方案吧 肯定有不足指出 欢迎批评指正 第一节中创建移动APP项目的时候选择的是