将数据从 MVC 控制器传递到 Angular 视图而不在最终 html 中显示数据值

Question

我正在做一个 MVC+angular 前端项目。在一种情况下，angular 页面将通过 HTTPS GET 请求启动，因此它会显示一个登录页面。在另一种情况下，我们将在 post 数据中获得带有用户名和密码的 HTTPS POST 请求。在这种情况下，我们需要让 MVC 控制器将这些信息传递给 angular 控制器，并以不同的方式启动 angular 页面视图。我阅读了几篇关于如何将数据从 MVC 控制器传递到 angular 控制器、angular 视图的文章。这是我的

MVC 控制器：

public class HomeController : Controller
    {
        [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
        public ActionResult Index(string name, string password)
        {
            if (name == null)
            {
                name = "test";
                password = "pass";
            }
            UserInfoModel infoModel = new UserInfoModel(name, password);
            var model = SerializeObject(infoModel);
            return View(model);
        }

        public static IHtmlString SerializeObject(object value)
        {
            using (var stringWriter = new StringWriter())
            using (var jsonWriter = new JsonTextWriter(stringWriter))
            {
                var serializer = new JsonSerializer
                {
                    // Let's use camelCasing as is common practice in JavaScript
                    ContractResolver = new CamelCasePropertyNamesContractResolver()
                };

                // We don't want quotes around object names
                jsonWriter.QuoteName = false;
                serializer.Serialize(jsonWriter, value);

                return new HtmlString(stringWriter.ToString());
            }
        }

Index.cshtml

<!DOCTYPE html>
<html ng-app="MVCApp" ng-controller="LandingPageController">

<body>    
    <h1>{{models.username}}</h1>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    @Scripts.Render("~/bundles/MVCApp")
    @model IHtmlString
    <script>
        angular.module("MVCApp", []).value("data", @Html.Raw(Model));
    </script>

</body>
</html>

Angular 应用程序 MVCApp.js 就像：

var MVCApp = angular.module('MVCApp', []);

MVCApp.controller('LandingPageController', LandingPageController);

Angular 控制器就像：

var LandingPageController = function ($scope, data) {
    console.log(data);
    $scope.models = {
        username: data.userName
    };
}

LandingPageController.$inject = ['$scope', 'data'];

当我运行它时，我可以看到数据确实传递给了 LandingPageController。但是，如果我查看页面的 html，我会在 html.

中看到以下内容

angular.module("MVCApp", []).value("data", {userName:"test",password:"pass"});

我不会将 html 中的数据（至少某些部分，如密码）设为 visible/readable。

我可以在不让数据在 html 中可见的情况下传递数据吗？

Answer 1

@Html.Raw(Model) 在呈现页面时输出模型的内容。如果您在页面加载后通过单独的 ajax 调用加载数据（而不是使用 @Html.Raw(Model)），那么通过查看页面源代码将看不到它。

使用 javascript 调试器仍然可以非常容易 找到它，因此这在安全方面绝对没有任何作用。但是，如果有人查看源代码，他们将看不到 JSON 数据的页面。

另一个缺点是您让用户等待更长时间，而不是在首次提供页面时提供初始数据。

此外，我不知道您最终想做什么，但将明文密码传递给浏览器几乎永远不会正确。

将数据从 MVC 控制器传递到 Angular 视图而不在最终 html 中显示数据值

Passing data from MVC controller to Angular view without showing the data value in the final html

html

javascript

asp.net-mvc

asp.net-mvc-4

angularjs