如果设置了位置,如何在每个状态下检查路由器ui,如果没有,则转到登录页

How to check in router-ui on each state if location is set, if not then go to landing page?

本文关键字:如果没有 ui 路由器 检查 登录 状态 位置 设置 如果      更新时间:2023-09-26

如何在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');
    }
  });
});

有一个工作示例。我们不得不做一些调整。

首先,我们需要正确设置监听器。当已经复述时,不得重定向

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()阶段使用它。

这意味着,它可以被注入到.run()方法、controller()或一些其他服务中,但不能被注入.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');
}])

检查此处的工作示例