使用 $cookies 和 $stateChangeStart 检查会话 ID 是否超过最大调用堆栈

Question

我不太确定为什么会这样。我正在尝试侦听我的 Angular 应用程序中的每个状态更改，如果用户不是 Auth，则将其推回登录。我将他们加密的 sessionID 存储在 cookie 中，检查该 cookie 是否未定义以及是否重定向用户......或者至少这是我想要做的。我将使用 toState 和 toParams 参数来处理用户角色等，因此您现在可以忽略这些作为此任务的一部分。

任何反馈都会有所帮助。提前致谢！

.run(($rootScope, $state, $cookies) => {
      $rootScope.$on('$stateChangeStart', (evt, toState, toParams) => {
            if(!$cookies.get('SessionID')){
                evt.preventDefault();
                $state.go('login');
            }
        })
  })

Answer 1

由于您在每次状态更改时都执行此操作，因此您创建了一个无限循环。您可能会对此进行一些修饰，但这应该可以帮助您：

.run(($rootScope, $state, $cookies) => {
      $rootScope.$on('$stateChangeStart', (evt, toState, toParams) => {
            if(!$cookies.get('SessionID'))
               {
                if (toState.name !== "login") {
                evt.preventDefault();
                $state.go('login');
               }
            }
        })
  })

以上内容可以帮助您入门，但随着您继续前进，您会发现您还希望允许在不使用 cookie 或身份验证的情况下访问其他状态。处理此问题的最佳方法可能是使用您在每个状态上定义的自定义属性。因此，当您定义状态时，您会执行以下操作：

.state('home', {url: '/home', templateUrl: 'views/home.html', authRequired: false}) 
.state('someSecureUrl', {url: '/someSecure.url', templateUrl: 'views/someSecureUrl.html', authRequired: true}) 

然后将上面的代码修改为：

.run(($rootScope, $state, $cookies) => {
          $rootScope.$on('$stateChangeStart', (evt, toState, toParams) => {
                if(!$cookies.get('SessionID')  && toState.authRequired)
                   {
                    evt.preventDefault();
                    $state.go('login');
                }
            })
      })

您也可以在您的状态上使用解析函数来查看执行此操作。