wex5 实战 登陆帐号更换与用户id一致性

一 前言   

   关于用户登陆，注册，页面跳转，我讲了很多，都是页面框架级别的。有人问到这个问题，索性总结一下，今天是收尾最后一篇。

   以往初学时的设计是：

   1 注册

   2 登陆

   3 进入页面。

   这种很简单，没有id就进不了主页面。

   但是实际上，除了通讯类的软件，一般软件不是先进入登陆页面，而是先进入主页，当操作某个功能时，再提示登陆。或者登陆后，在某个时刻更换帐号，重新进入登陆页面。

   像这种后来进入登陆页后，用户登陆成功后如何保证再回到web时，各个页面的用户id唯一性呢？？

   用户id更换，web中的每一个页面必须同时更换。

   也就是说，每个页面的首要任务是：随时接收用户id,并判断用户id是否更改，如有更换，则即时更新用户信息和权限。

   登陆页作为一个任意页面的公共目标页面，如何跳转到来源页面并正确传参呢？

   带着这些问题，我们完成页面框架的收尾工作。

二 效果演示：

  1 进入主页后登陆

      

2  更换帐号

    

   

  如果用户已经登陆，则弹出更换帐号对话框

  

  用户更换成功，头像和号码同步进行了更新

  

三  设计思路：

   页面同步，modeload可以不要，它只能初始化页面，刷新一次data.但是modelParamsReceive异常重要，在页面加载之前，监听参数状态，并进行参数接收，触发data刷新。这个我在页面同步的博文中简单提过，现在深入一下。

四  页面逻辑与代码实现

   1 监听参数并接参，所有页面都作如此处理，来保证用户id是否更换，如有更接，即时过滤并得到当前行。data自动加载关闭掉，设置过滤条件后，接管刷新事件，效能问题影响不大。setFilter里的语句为ksql拼接写法，其实是通过XHR的双向联接，用sql语句过滤数据库，这就是说，每一个页面，都用这种方法，保证用户id一致性，效能不会有太大影响。

    

   2 帐号更换

    登陆与帐号的显示切换，很简单，一个三目表达式

    

    未登陆与登陆后的头像更换，同上

   

    提示帐号更换的窗口弹出，用innerHTML得到span元素的值来判断 

    

   justep.shell.showPage页面跳转并传参，比以往多了一个from，这是一个键，我的定义是，哪个页面跳转到登陆页，给它一个来源，登陆页根据from，登陆成功后再回到

mine页面。如果是其它页面，则跳转到其它页面。不能每次登陆后去一个页面，就要这么来设置。

   3 登陆页面

     

       参数接收，不看不知道，一看，多了这么多判断。登陆页作为一个公共页面，哪个页面都能传参回来，不能直接刷新data，根据来源页面的this.params.from的值,得到来源是哪个页面，才能决定，如何动作。

    

    登陆成功后，跳转到来源页面。这里用变量，呵呵，这么写还真行。

    每个页面都要接参并传参，作为用户id一致性的必要判断。

   4 所有页面接参，再次重申

    

   5 用户id在传参判断中居首要地位。比如下图中，一个页面，左右两个页面都对它传参，这个页面就要首先判断用户id,然后根据来源执行不同的动作。

    没想到，后期登陆，带了如此复杂的传参问题。

    

   我发现，有的同学中modeload里强制刷data,还有的是在modelactive时接参，这都是不对的。

   经过反复测试，我抛弃了window.xxxx的全局变量，而是使用了逻辑复杂的传参与接参。原因是window.xxxx变量虽然可以全局，但是需要手动得到，不能触发类似于modelParamsReceive那种类似于监听器的事件来触发data刷新。以前探讨过的全局可观察变量，反复测试，在不同的页面跳转过程中，不能向上级页面传递可观察属性。

   比如，mine页面已经打开过，再跳转回来就不行了。

   跟那个modeload一样，只能初始化一次页面。除非你关掉web重新打开。

   

五  总结:

  1 modelParamReceive,是一个实时的监控事件，无论页面是否打开过，都可以接参

  2 modelParamReceive看似代码复杂，实际简单，可以实现更复杂的页面控制

 3 传参，不仅仅是页面跳转，在多级页面中，还起到中间页面，控制简单流程的作用。

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。