如何在我的 ng-show 中放置一个 localStorage var？（角度 JS/Firebase）答案

【问题标题】：How do I put a localStorage var inside my ng-show ? (Angular JS/Firebase)如何在我的 ng-show 中放置一个 localStorage var？（角度 JS/Firebase）
【发布时间】：2017-06-08 06:10:57
【问题描述】：

情况：

当我加载一个页面但尚未登录时，一切正常，我只在导航中看到 Login 和 Register。

但是当我登录并加载任何页面时，导航会在"Register", "Log in", "Profile" and "Log out" 同时出现的奇怪状态下停留大约 0.5 到 1 秒。

然后导航显示应该是：仅显示"Profile" and "Log out"。

编辑：ng-cloack 已修复此问题，但我登录时不会出现个人资料和注销。

代码：

header.ejs

<html ng-app = "app">
        <div ng-controller="ctrlHead">
          <ul class="nav navbar-nav">
                <li ng-show="!authenticated"><a href="/users/register">JOIN</a></li>
                <li ng-show="!authenticated"><a href="/users/login">Login</a></li>
                <li ng-show="authenticated"><a href="/users/profile">ME</a></li>
                <li ng-show="authenticated" onclick="signOut();"><a>Logout</a></li>
          </ul>
       </div>

问题：

如何在我的 ng-show 中输入 localStorage 变量？

P.S.：header.ejs 是一个 EJS 部分，加载到所有页面上。

我尝试了什么：

这可行，但会在每个页面重新加载导航，导致闪烁。

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.controller("ctrlHead", ["$scope", "Auth", "$window",
  function($scope, Auth, $window) {
    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(firebaseUser) {
        if (firebaseUser) {
            setAppCookie();
        }
        $scope.authenticated = firebaseUser;
    });
  }
]);

我尝试使用localStorage：

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.controller("ctrlHead", ["$scope", "Auth", "$window",
  function($scope, Auth, $window) {
    $scope.authenticated = $window.localStorage.getItem("authenticated");
    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(firebaseUser) {
        if (firebaseUser) {
            setAppCookie();
        }
        $window.localStorage.setItem("authenticated", firebaseUser);
        $scope.authenticated = $window.localStorage.getItem("authenticated");
    });
  }
]);

现在ngCookies... 不起作用：/ 无论身份验证状态如何，导航都卡在登录模式。

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.controller("ctrlHead", ["$scope", "Auth", "$cookies",
  function($scope, Auth, $cookies) {

    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(firebaseUser) {

        if (firebaseUser) {
            setAppCookie();
            $cookies.put('authenticated', firebaseUser);
            $scope.authenticated = $cookies.get('authenticated');
        } else {
            $cookies.put('authenticated', firebaseUser);
            $scope.authenticated = $cookies.get('authenticated');
        }
    });

  }
]);

编辑：我现在正在使用 angularfire，它工作正常，除了一件事，我需要将 authstate 存储在 localStorage 中。我一直在尝试使用 ng-storage 和 $window.localSorage 但它没有用......

【问题讨论】：

这是生活在某个地方吗？
@SergChernata 遗憾的是：/
你能做个小提琴吗？我可以帮你调试，但如果没有现场示例，很难说出发生了什么。
@SergChernata 嗯，让我看看我该怎么做。我需要以某种方式对你进行身份验证。
我不得不说，我无法重现这个问题：jsfiddle.net/wyus5d6a

标签： javascript angularjs firebase firebase-authentication angularfire

【解决方案1】：

您可以使用 angular ng-cloak 指令来防止 AngularJS html 模板在您的应用程序加载时被浏览器以原始（未编译）形式短暂显示。

ngCloak documentation

<html ng-app="app" ng-cloak>
      <ul class="nav navbar-nav">
            <li ng-show="!authenticated"><a href="/users/register">JOIN</a></li>
            <li ng-show="!authenticated"><a href="/users/login">Login</a></li>
            <li ng-show="authenticated"><a href="/users/profile">ME</a></li>
            <li ng-show="authenticated" onclick="signOut();"><a>Logout</a></li>
      </ul>
</html>

您应该使用$window 服务来访问在您的控制器范围之外创建的变量。最重要的是，您不应该两次创建（几乎）相同的控制器。

$window documentation

使用类似的东西（未测试）：

firebase.auth().onAuthStateChanged(function(user) {
    console.log("CURRENT USER:" + firebase.auth().currentUser);
    app.controller('ctrl', function($rootScope, $window) {
        $scope.authenticated = $window.user != null;
        setAppCookie();
        // Compile the whole <body> with the angular module named "app"
        angular.bootstrap(document.body, ['app']);
    });
});

对于本地存储，你只需要使用常规的：

//Set item
localStorage.setItem("authenticated", JSON.stringify(firebaseUser));

//Get item
$scope.authenticated = JSON.parse(localStorage.getItem("authenticated"));

【讨论】：

完美！现在你能告诉我为什么 ME 和 Log out 永远不会出现吗？我做错了什么？
@Coder1000 更新了我的答案
这不起作用，因为用户是一个对象，而不是一个布尔值。
@Coder1000 更新
没用。但你提到我不应该有两次相同的控制器：让我更新我的问题。

【解决方案2】：

您已经声明了 $rootScope，但我没有看到您注入的位置..

记住所有依赖都必须通过 $inject 依赖注入..

    Var app = controller('mycontroller', ['$rootScope', function($rootScope) {
}]);

【讨论】：