在单页应用程序中使用Angular的安全性和本地化？

Question

我正在调查使用以下堆栈创建单页应用程序（在此处打​​开建议）

• 角
• JQuery的
• ASP.Net MVC 4
• 实体框架5

我几乎在这个堆叠和角度出售，但有一些我不确定的事情。 不同的用户具有不同的角色，我们需要能够根据角色隐藏/显示页面上的某些页面和/或控件。 我熟悉一些更传统的Web应用程序的解决方案，但我不知道在单页应用程序中我会从哪里开始。

我希望不使用MVC部分视图，而只是像WebApi一样发送和处理服务器代码。 但是，angular必须处理所有模板，这意味着有人可以访问前端的模板，并且可能能够找出调用它们不应该的函数？ 或者我应该检查WebAPI方法中的角色并确保它们具有正确的角色？

下一个问题是本地化。 我们需要支持多种语言。 我希望我们可以只有不同的语言文件en_gb.XML，它们包含密钥及其各种翻译。 然后，如果用户改变了语言，我可能只能使用值来改变角度

angular.value("language", 'en_gb.js');

要么

angular.value("language", 'en_gb.xml');

有没有其他人解决过这些问题。

Answer 1

安全性：你应该让AngularJS控制视图中的所有内容，如模板，部分视图等，因为AngularJS是一个功能齐全的前端框架。 因为它只是前端框架，所以它不负责服务器数据，所以只需要进行一些RESTful调用来获取/保存/更新/删除数据。 并且它也不负责安全性，所以你所谓的“WebApi”必须在服务器端100％安全。 因此，即使有人能够弄清楚他不被允许做什么呼叫，呼叫也不会成功，因为它的凭证将在服务器端进行检查。 还有一些恶意可能的攻击，AngularJS有一个答案。 请参阅http://docs.angularjs.org/api/ng。$ http的“安全考虑”部分。

本地化：AngularJS支持货币，日期和数字的本地化。 但是对于你的用户界面中的字符串，还没有任何内置的内容。 你必须建立自己的答案。 有一些尝试用AngularJS实现翻译，比如这里： https ： //github.com/firehist/grunt-angular-translate

Answer 2

我可以帮助你解决这里的安全问题。 您需要实现自定义一些自定义逻辑，以根据用户角色隐藏\\ show元素。 只要您可以将用户角色信息传递给客户端，您就可以实现这样的show \\ hide逻辑。 请记住，show \\ hide逻辑应由服务器驱动，否则任何人都可以更改客户端数据并获取功能。

实现此目的的一种方法是返回服务器端模板（部分视图）到客户端进行渲染（ ng-include和ng-view支持加载服务器模板）。 服务器可以验证用户是否有权访问并在失败时返回空响应。 所以不存在泄露信息的可能性。

可以为所有webapi调用添加类似的检查，并将未授权状态代码返回给最终用户。