原理：

1. 通过变量来记住用户的状态，是处于登录前还是登录后

2. 用master 的 onPageLoad 事件来判断是显示登录前的界面还是登录后的界面

实例：

1. 将设计好登录前和登录后两种界面效果做成dynamic panel的两种state，默认state为未登录的。pannl命名为login

登录前的state命名为no:

登录后的state命名为yes:

2. 添加登录前“登录”按钮的交互事件

2.1

2.2 新建一个变量，“login”

2.3 将该变量login赋值为“yes” 表示已经登录

2.4 添加交互事件

选择reload current page方式

3. 添加登录后“退出”文字链的交互事件

3.1

将该变量login赋值为“no” 表示未登录

4. 将这panel转化成master

5. 为master添加onPageLoad事件

5.1 为交互事件设置引发条件

当变量 login 等于“yes”时，既用户已经登录

5.2 设置交互事件

切换到pannel面板的“yes”state

5.3 同上面的设置

当判断出用户没有登录（变量login等于“no”）切换到dynamic pannel 面板的“no”state

原型图预览

下载源文件

建议继续学习：

1. python实现自动登录discuz论坛    (阅读：31576)
2. 微信扫码登录网页实现原理    (阅读：15587)
3. 初探单点登录 SSO    (阅读：9284)
4. 你会做Web上的用户登录功能吗？    (阅读：5567)
5. 如何设计用户登录    (阅读：5483)
6. perl的expect使用方法，实现非交互式登录。    (阅读：4479)
7. 如何让ssh登录更加安全    (阅读：4473)
8. 什么是OpenID？OpenID概念、原理和案例    (阅读：4267)
9. Axure之变量的使用    (阅读：4181)
10. 互联网上的单点登录研究    (阅读：3990)