AngularJS：使用 URL 参数保持应用程序状态答案

【问题标题】：AngularJS: keep application state with URL parametersAngularJS：使用 URL 参数保持应用程序状态
【发布时间】：2015-07-01 22:46:04
【问题描述】：

我已经对此主题进行了一些研究，但我似乎无法继续前进，很可能是因为无法使用正确的关键字来解释我的问题。

我正在使用 AngularJS 开发一个网站，其中一些用户操作需要身份验证，例如将某个项目添加到收藏夹、评论帖子、关注用户等。

每当一个人（未登录的用户）尝试其中一个操作时，他都会收到一个模式提示以执行登录操作。为了更好地处理应用程序状态和一致性，我正在重新加载页面。这意味着丢失用户在登录之前的状态。想象一下，试图收藏一个过滤搜索结果的项目，结果以无限滚动的方式进行分页；重新加载整页后处理所有这些信息似乎是不可行的，因为数据保存在控制器的 $scope 中。我正在尝试选择一个边缘案例，以便您更好地了解我的情况的严重性。

有没有办法通过在 URL 上附加这些参数并在满足所有必要条件时执行它们来保持 Angular 的状态，例如 PHP 如何处理它？

解决这个问题，可能会在其他情况下帮助我，例如在发送时事通讯时，我会发送带有用户执行操作的 URL，例如：

http://www.example.com/like?item=123412

意味着用户会尝试喜欢/收藏这个特定项目。如果已经登录，点赞，否则提示登录后执行。

在这个问题上，我建议使用参数方法，但您碰巧知道其他问题，我愿意接受任何可能为我指明正确方向的建议。

谢谢。

【问题讨论】：

标签： javascript php angularjs

【解决方案1】：

是的，请查看存储。在 MDN 上：https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage#localStorage

有很多 Angular 包可以为您处理这个问题。 localStorage 和 JWT 也有一些很好的捆绑包。

在这里，我找到了一个很好的例子，说明如何在没有包的情况下做到这一点：https://stackoverflow.com/a/25430797/2433843（查看 Plunker 演示）

编辑：必须查找名称，但 angular-locker 发现 here 为我解决了这个问题。我将它与用于 API 的 Laravel 开发人员 JWT 包结合使用，但如果您在搜索引擎中输入angular storage，还有很多更多，例如ngStorage（注意：不是官方的，尽管ng找到here)。

【讨论】：

这看起来很棒。将不得不对其进行更深入的研究。它不能解决所有描述的问题，但它是朝着解决方案迈出的一大步。谢谢。

【解决方案2】：

好吧，假设这些是您的状态，在此示例中，您拥有的每个视图都有一个状态，您有登录/强制/设置，因此当用户更改状态时，您通过收听 $stateChange 来捕捉他，如果不允许他去，则重定向那里

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider

// setup an abstract state for the tabs directive
.state('login', {
params: 8,
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})

.state('settings', {
  params: 8,
  url: '/settings',
  templateUrl: "templates/settings.html",
  controller: "SettingsCtrl"
   })

.state('mandant', {
params: 8,
url: '/mandant',
templateUrl: "templates/mandant.html",
controller: "MandantCtrl"
})
});

在你的 MainController 中你可以简单地使用

 $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
    if(userLoggedIn == true){
      //user is allowed
    }else{
      //user is not allowed
     $location.path('/login');
    }
});

因此，您只是在检查某种登录令牌或会话，如果不存在，您只需将用户重定向到登录或其他方式

【讨论】：

但是这种方法不会让他回到原来的位置，也不会执行他正在尝试的操作，因为我们没有保留这些数据。除非我误解了你的例子。

【解决方案3】：

我个人会这样做，基本上只是将信息存储在服务中！

myApp.service('viewStateService', function() {
    this.someController['data'] = '';
    this.someController['currentRecord'] = '';
    // basically add as many properties as you like.
});

myApp.controller('someController', function($scope, viewStateService){
  if(viewStateService.data != ''){
     $scope.data = viewStateService.someController['data'];
     $scope.currentRecord = viewStateservice.someController['currentRecord'];

  } else {
    // grab the data normally.
  }

  $scope.$on("$destroy", function() {
     viewStateService.someController['data'] = $scope.data;
     viewStateService.someController['currentRecord'] = $scope.currentRecord;
  });
});

我在我的手机上，所以这未经测试，但基本上只是将您需要的任何信息存储到服务中，然后在控制器加载时将其回调。

【讨论】：