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

Question

我正在从事MVC + Angular前端项目。 在一种情况下，将使用HTTPS GET请求启动角度页面，因此，它将显示一个登录页面。 在另一种情况下，我们将在发布数据中获取HTTPS POST请求以及用户名和密码。 在这种情况下，我们需要让MVC控制器将这些信息传递给角度控制器，然后以不同的方式启动角度页面视图。 我读了几篇有关如何将数据从MVC控制器传递到角度控制器（角度视图）的文章。 这是我所拥有的

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);

角度控制器就像：

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中看到/读取数据（至少一部分，例如密码）。

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

Answer 1

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

使用javascript调试器仍然可以很容易地找到它，因此就安全性而言，这绝对没有任何作用。 但是，如果有人查看源，他们将看不到JSON数据页面。

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

另外，我不知道您最终要做什么，但是将明文密码传递给浏览器几乎是不正确的。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-07 20:19:14

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-07 20:19:14

解决方案1
1 已采纳 2015-03-07 20:19:14