在硬刷新时，$rootScope 消失并且无法访问当前用户

Question

我正在使用 $rootScope 来始终访问当前登录的用户。当用户向系统提交新餐食时，将存储餐食属性以及提交它们的用户 ID。

这有效，但是当我用力刷新浏览器时，$rootScope.user 对象消失了。

我该如何预防？

在app.js我有：

$rootScope.user;

以下是用户登录时发生的情况：

Auth.$onAuth(function (user) {
                if (user === null) {
                    console.log("Not logged in yet");
                } else {
                    console.log("Logged in as", user.uid);
                }
                $rootScope.user = user;
        });

然后，当用户访问 AddMeal 页面时，在 AddCtrl 中我们有：

var firebaseObj = new Firebase("https://myapp.firebaseio.com/courses/");
    var fb = $firebaseArray(firebaseObj);
console.log($rootScope.user)

$scope.newMeal = {
    name: "",
    price: "",
    ingredients: "",
    description: "",
    category: "",
    cuisine: "",
    userID:""
};

$scope.submitMeal = function () {
    if (angular.equals({}, $scope.newMeal)) {
        alert("Your form is empty");
        $rootScope.notify('Your form is empty')
    } else {
        console.log($scope.newMeal);
        var name = $scope.newMeal.name;
        var price =  $scope.newMeal.price;
        var ingredients= $scope.newMeal.ingredients;
        var description = $scope.newMeal.description;
        var category= $scope.newMeal.category;
        var cuisine= $scope.newMeal.cuisine;

        fb.$add({
            name: name,
            price: price,
            ingredients: ingredients,
            description: description,
            category: category,
            cuisine: cuisine,
            userID: $rootScope.user.uid
        }).then(function(ref) {
            $scope.newMeal = {};
            console.log(ref);
        }, function(error) {
            console.log("Error:", error);
        });

        $rootScope.notify('New meal has been added!')
    }

这是我在 app.js 中的 run 函数：

.run(function ($ionicPlatform, $rootScope, $firebaseAuth, $firebase, $window, $ionicLoading) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);

            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }

            $rootScope.show = function(text) {
                $rootScope.loading = $ionicLoading.show({
                    content: text ? text : 'Loading..',
                    animation: 'fade-in',
                    showBackdrop: true,
                    maxWidth: 200,
                    showDelay: 0
                });
            };

            $rootScope.hide = function() {
                $ionicLoading.hide();
            };

            $rootScope.notify = function(text) {
                $rootScope.show(text);
                $window.setTimeout(function() {
                    $rootScope.hide();
                }, 1999);
            };

            $rootScope.user;

        });
    })

Answer 1

AngularJS 作为 SPA 工作（here 你可以阅读一些关于它的内容）。关键是，当页面重新加载时，与任何其他 SPA 一样，它将丢失所有数据，应用程序将 "reeboted"。这就是您遇到此问题的原因。

有一个简单的方法可以解决这个问题：当应用程序 loads/reloads 时，它会转到 app.config()，然后它会转到 app.run()（如果有）。所以我的解决方案是将用户的信息数据保存在本地存储中（像 cookie 一样工作），然后在应用程序初始化时从那里请求它。

angular.module('MyApp').run(function($rootScope){
    if(!angular.isDefined($rootScope.userInfo) && localstorage.userInfo){
        // UserInfo exists in localstorate but not on $rootScope. This means the page was reloaded or the user is returning.
        $rootScope.userInfo = localstorage.userInfo;
    }else if(!angular.isDefined($rootScope.userInfo) && !localstorage.userInfo){
        // User is not logged at all. Send him back to login page
    }else if(angular.isDefined($rootScope.userInfo)){
        // User is logged in. You can run some extra validations in here.
    }
});

我假设您将用户信息保存在一个变量上 $rootScope.userInfo

话虽如此，我强烈建议您尝试一个服务来保存您的数据，而不是在 $rootScope 上。 Here's 有关如何实现该目标的指南。

希望这能解决您的问题。

**更新

如果您使用的是 Ionic，您可以尝试这样的操作：

var myApp = angular.module('myApp', ['ionic']);
    myApp.run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
        //load your settings from localStorage or DB where you saved.
    });
});

取自此。

在硬刷新时，$rootScope 消失并且无法访问当前用户

On hard refresh, $rootScope disappears and cannot access current user

angularjs

firebase

ionic-framework

firebase-authentication