使用 Angular js 进行身份验证答案

【问题标题】：authentification with angular js使用 Angular js 进行身份验证
【发布时间】：2017-05-11 20:03:15
【问题描述】：

我需要修改这个 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"}]

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

这是我需要的图像模式

请有人帮助我

【问题讨论】：

标签： javascript angularjs json authentication login

【解决方案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 文件中输入的用户名和密码。
您需要在服务器上进行用户名/密码验证，而不是像现在这样将它们全部下载到客户端。
您需要使用身份验证框架，这样您就不必担心在服务器上加密用户密码之类的事情。
您拼错了 Welcome 和 Logout。
我应该在logout function 内将$scope.password 设置为undefined；我错过了。
如果您想要一个仅包含 (2) 个 .html 文件的解决方案，就像您在问题中提出的那样（我建议将所有内容拆分为组件），请使用：http://plnkr.co/edit/MdEu7wo0T9gGiLUrHkKc?p=preview

【讨论】：