用角度js进行身份验证

Question

我需要修改这个plunker代码：plnkr.co/edit/Mvrte4?p=preview

我需要删除用户角色，并且所有用户都加入同一页面

如果可能的话，在两页中修改代码

• 第1页：index.html内容登录表单
• 第2页：home.html内容注销btn

这是可以登录home.html的用户列表

    [{  "username": "user1","password": "pass1" }, {"username": "user2","password": "pass2" }, {"username": "user3","password": "pass3"}, {"username": "user4","password": "pass4"}]

我的plunker：plnkr.co/edit/fplol0FFpGkLZC3ZdgKX?p=preview

这是我需要的图像架构

请有人帮助我

Answer 1

http://plnkr.co/edit/TGnjdh1BIfpTx48OKVtT?p=preview

• 您需要在index.html中包含AngularJS作为JavaScript依赖项。
• 您需要包含ng-app指令并指定一个模块（我使用myApp）。
• 您需要将密码元素设为type password。
• 我把所有内容都分解为指令 - 索引调用<main />，调用<home />和<login />。
• ng-if创建了一个独立的范围，因此我使用controllerAs和vm在<home />和<login />指令之间正确传递数据。
• 我将ng-model添加到输入元素以进行双向绑定;当用户与<input />元素进行互动时，$scope上的值会保持最新。
• 我使用{{ }}来显示用户名。
• 我使用$http获取您在.json文件中输入的用户名和密码。
• 您希望在服务器上进行用户名/密码验证，而不是像您当前那样将它们全部下载到客户端。
• 您希望使用身份验证框架，因此您不必担心在服务器上加密用户密码等问题。
• 您错过了欢迎和退出。
• 我应该在$scope.password undefined内设置logout到function;我错过了。
• 如果您想要一个只有（2）.html文件的解决方案，就像您在问题中提到的那样（我建议将所有内容拆分为组件），请转到：http://plnkr.co/edit/MdEu7wo0T9gGiLUrHkKc?p=preview