Angularjs Angular JS：刷新页面时，所有$scope都将丢失_Angularjs

Angularjs Angular JS：刷新页面时，所有$scope都将丢失

angularjs

Angularjs Angular JS：刷新页面时，所有$scope都将丢失,angularjs,Angularjs,在刷新页面时，我在使用angularJS时遇到了几个问题。用户成功登录后，如果刷新页面，则所有$scope都将丢失。用户必须再次登录，然后注销。我遇到的另一个问题是，当用户注册事件时，他们可以查看用户仪表板中的所有事件。在用户仪表板中，他们将事件放在带有“删除”按钮的“卡片”中。查看“下面的事件卡代码” **下面是活动卡** <div class="container-fluid"> <div class="row"> <div class="col m3 l

在刷新页面时，我在使用angularJS时遇到了几个问题。用户成功登录后，如果刷新页面，则所有$scope都将丢失。用户必须再次登录，然后注销。我遇到的另一个问题是，当用户注册事件时，他们可以查看用户仪表板中的所有事件。在用户仪表板中，他们将事件放在带有“删除”按钮的“卡片”中。查看“下面的事件卡代码”

**下面是活动卡**

<div class="container-fluid">
 <div class="row">
  <div class="col m3 l3" ng-repeat="items in userEvents">
   <div class="card">
    <div class="card-image">
      <img src="/images/uploads/{{items.eventImage}}"/>
      <span class="card-title">{{ items.title }}</span>
    </div>
    <div class="card-content">
      <p>{{ items.description }}</p>
    </div>
    <div class="card-action"> <!--BREAKING STUFF HERE!-->
      <a class="waves-effect waves-light btn" ng     click="updateEvent(items._id)" ui-sref="updateDash">Edit</a>
      <a class="waves-effect waves-light btn" ng-click="deleteEvent(items._id)">Delete</a>
    </div>
  </div>
</div>

我放置了$window.location.reload（）；刷新页面，以便删除的“事件卡”不会显示在页面上，但页面似乎会破坏事件卡，用户$scope将丢失。我的导航栏按钮变为登录和注册按钮，就好像没有用户登录一样

请帮忙

重新加载页面将消除所有当前作用域，因为您实际上是在将页面重置回其初始状态

如果要在不重置页面上的作用域的情况下删除数据，请调用从userEvents列表中删除该项。

重新加载页面将消除所有当前作用域，因为实际上是将页面重置回其初始状态

如果您想删除数据而不重置服务器上的作用域，请调用从userEvents列表中删除该项。

我不知道如何实现后端，因此此解决方案只是一个一般猜测。对于用户登录，不应将用户信息保存在$scope.user中，而应使用会话保存刷新期间要保留的任何信息

例如，创建一个如下所示的服务：

angular.module('...')
.service('SessionService', function($window) {
    var service = this;
    var sessionStorage = $window.sessionStorage;

    service.get = function(key) {
        return sessionStorage.getItem(key);
    };

    service.set = function(key, value) {
        sessionStorage.setItem(key, value);
    };

    service.unset = function(key) {
        sessionStorage.removeItem(key);
    };
});

在控制器中：

angular.module('...')
.controller("LoginCtrl", function($scope, SessionService) {
   $scope.logIn = function(credentials) {
      $http.post('/someUrl', {credentials: credentials}).then(
         function(res) {
            SessionService.set("userId", res.data.id);
            // prefer SessionService.set("userToken", res.data.userToken);     
      });
   }

});

然后，当您检查用户是否登录时，只需检查

SessionService.get("userId") is undefined or not

您可以将其放入另一个通常称为

身份验证的服务中

同样，因为我不知道您的身份验证在后端是如何工作的，所以我不知道您需要在前端保留哪些数据，以便即使在刷新页面后，您也可以使用保存在会话存储中的数据再次从后端查询正确的当前登录用户

刷新页面后，angular应用程序将恢复到初始状态，因此想法很简单：

在他们登录后，您可以保存某种可以识别用户的令牌，然后在刷新页面后，您可以使用该令牌向后端发出请求并获取登录的用户。用户信息不会丢失

您可以选择在会话中保存完整的用户信息，这样您就不需要向后端发出再次获取用户的请求，并且您可以在用户注销时删除会话中的用户信息

我不知道如何实现后端，所以这个解决方案只是一个猜测。对于用户登录，不应将用户信息保存在$scope.user中，而应使用会话保存刷新期间要保留的任何信息