如果用户通过身份验证，则显示视图答案

【问题标题】：Showing a view if a user is authenticated如果用户通过身份验证，则显示视图
【发布时间】：2018-03-11 20:06:57
【问题描述】：

当用户通过身份验证时，我无法显示视图。为什么简单的ng-show="vm.isLoggedIn" 在评估为true 时不显示视图？

这是我的HTML：

<div ng-show="vm.isLoggedIn">
    <div ng-view></div>
</div>

这是我的控制器：

var MainCtrl = function(userAccount) {
    var vm = this;
    vm.isLoggedIn = false;
    vm.userData = {
        userName: "",
        email: "",
        password: "",
        confirmPassword: ""
    };
    vm.login = function () {
        vm.userData.grant_type = "password";
        vm.userData.userName = vm.userData.email;

        userAccount.login.loginUser(vm.userData, function (data) {
            vm.isLoggedIn = true;
            vm.message = "";
            vm.password = "";
            vm.token = data.access_token;
        });
    }
}

这是我创建的userAccount 服务。

var userAccount = function ($resource, appSettings) {
    return {
        registration: $resource(appSettings.serverPath + "/api/Account/Register", null,
            {
                "registerUser": { method: "POST" }
            }),
        login: $resource(appSettings.serverPath + "/Token", null, 
            {
                "loginUser": {
                    method: "POST",
                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
                    transformRequest: function (data, headersGetter) {
                        var str = [];
                        for (var d in data) {
                            str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
                        }
                        return str.join("&");
                    }
                }
            })
    }
}

我认为这与 MainCtrl 或 userAccount 无关，但我将它们包含在上下文中。

ng-show 是否会阻止显示任何ng-view？即使ng-show 的计算结果为真？

【问题讨论】：

标签： javascript angularjs authentication asp.net-web-api

【解决方案1】：

您需要检查两件事。

确保在您的 html 中使用“controller as”表示法，并且您的控制器被命名为 vm:

ng-controller="whateverCtrl as vm"

如果您不这样做，那么 vm.isLoggedIn 将无法正确评估。

确保实际调用了您的 vm.login 方法，以便该标志实际设置为 true。您还应该最初将控制器中的标志设置为 true 以查看该标志实际上具有您想要的效果。一旦你看到了这个东西，然后再把它变成 false 并从那里继续。

即使这可能不是问题，我实际上也会像这样编写标志检查：

<div ng-show="vm.isLoggedIn === true">
    <div ng-view></div>
</div>

【讨论】：

我已经检查了这两个问题。如果我在控制器初始化时离开vm.isLoggedIn = true;，它将显示出来。我认为当我从Promise 的返回值更新vm.isLoggedIn 时，问题是让ng-show 工作。

【解决方案2】：

您可以使用 ng-include 和 vm.isLoggedIn 可以是 url，当它不为 false 时，它将被包含示例：

<button ng-click="vm.isLoggedIn=user==authenticated?'put url hier':false">Include</button>
<div ng-include="vm.isLoggedIn"></div>

【讨论】：