javascript - 如果设置了位置，如何检查 router-ui 的每个状态，如果没有设置，则转到登陆页面？

Question

如何在 Angular router-ui 中实现以下场景:除了登录页面之外，用户无法浏览没有位置的页面。无论用户是否登录，如果设置了位置，请检查每个状态更改，如果未设置，则转到登录页面。如果用户已登录并拥有位置，则设置 cookie，如果没有，则转到登陆页面。

我目前的想法，但它不起作用，它是否完全正确？

var app = angular.module('myApp', ['ngCookies', 'ui.router', 'Devise', 'ngResource']);

app.config([
    '$stateProvider', '$urlRouterProvider' '$cookies', function ($stateProvider, $urlRouterProvider, $cookies) {
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'home/_home.html',
        controller: 'MainCtrl'
    }).state('landing', {
        url: '/landing',
        templateUrl: 'landing.html',
        controller: 'landing',
        resolve: {
            location: [
                '$state ', '$stateParams', '$q', '$window', '$cookies', function ($state, $stateParams, $q, $window, $cookies) {
                  var deferred = $q.defer();

                 $window.navigator.geolocation.getCurrentPosition(function (position) {
                    $cookies.location = position;
                    deferred.resolve(position);
                 });
                 return deferred.promise;

            }]
        }
    }).state('login', {
        url: '/login ',
        templateUrl: 'auth/_login.html ',
        controller: 'AuthCtrl',
        onEnter: [
            '$state', 'CustomAuth', function ($state, CustomAuth, $cookies) {
            CustomAuth.currentUserResource().then(function (resp) {
              $cookies.location = resp.data.user.location;
              $state.go('home');
            });
        }]
    })
    $urlRouterProvider.otherwise('home');
}]);

app.run(function($rootScope, $cookies) {
  $rootScope.$on('$stateChangeStart', function(event, toState) {
    if (!$cookies.location) {
      event.preventDefault();
      $state.go('landing');
    }
  });
});

Answer 1

有a working example 。我们必须做一些调整。

首先，我们需要正确设置监听器。当已经重新调用时，它不能重定向

app.run(['$rootScope', '$state', '$cookies',
  function($rootScope, $state, $cookies) { 
  $cookies.location = "";

  $rootScope.$on('$stateChangeStart', function(event, toState) {

    if(toState.name ===  "landing")
    {
      // already was redirected 
      // we head to landing
      // get out of hee
      return; 
    } 

    if ($cookies.location === "") 
    {

      event.preventDefault();
      $state.go('landing'); 
    }
  });

}]);

此外，$cookies 不是提供者，而是服务。这意味着我们不能在 .config() 阶段使用它，而只能在 .run() 阶段使用它。

这意味着，它可以被注入(inject)到 .run() 方法、controller() 或其他一些服务中，但不能注入(inject)到 .config( )

调整了定义，修复了许多小问题:

.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'tpl.html',
        controller: 'MainCtrl'
    })
    .state('landing', {
        url: '/landing',
        templateUrl: 'tpl.html',
        controller: 'landing',
        resolve: {
            location: [
                '$state', '$stateParams', '$q', '$window', '$cookies'
                , function ($state, $stateParams, $q, $window, $cookies) {
                  var deferred = $q.defer();

                  // example how to quickly set some value
                  $cookies.location = "some position";
                  deferred.resolve($cookies.location);                    

                 return deferred.promise;    
            }]
        }
    })
    .state('login', {
        url: '/login ',
        templateUrl: 'tpl.html',
        controller: 'AuthCtrl',
        ...
    })
    $urlRouterProvider.otherwise('home');
}])

检查working example here