Question

为此目的，在$stateProvider中使用服务是否可以？

我在堆栈上经历过很多关于路由的帖子，但大多数人都对初学者感到困惑，因为每个人都使用不同的方法并将其视为火箭科学。我想从一开始养成良好的习惯，避免坏习惯......

目标：在应用程序启动之前运行一些函数，并根据我的最终用户的输出路径。

我尝试过：

实施服务＆gt;＆gt; AuthService |操作＆gt;＆gt;简单检查：

从客户端获取JWT令牌（SQLite DB） - 令牌包含基本详细信息+ API密钥
发送到服务器进行身份验证
响应（布尔）
如果授权＆gt;＆gt;加载主页视图。否则，重定向到注册视图。
在加载任何视图之前进行服务器端验证

服务提供商

myApp.factory('AuthService', function ( Session) {
         var authService = {};
          authService.isAuthorized = function(){
          return Session.authorized() ;
         };
        return authService;
 });


myApp.service('Session', function ($resource, $q, $timeout, URL_Config) {
  this.authorized = function () {
        var deferred = $q.defer();
        $timeout(function () {
            var db = window.openDatabase("config.db", "1.0", "Config", 2 * 1024 * 1024);
            db.transaction(function (tx) {
                tx.executeSql("SELECT * FROM user_details", [], function (tx, data) {
                    var token = data.rows.item(0).token;
                    var request = $resource(URL_Config.BASE_URL + '/authCheck', {token: token },
                        { query: {
                            isArray: false,
                            method: 'GET'
                        } });
                    request.query(function (res) {
                        if (res.error) {
                            deferred.resolve(false);
                        } else {
                            deferred.resolve(true);
                        }
                    });

                }, function (e) {
                    deferred.resolve(false);
                });
            });
        }, 500);
        return deferred.promise;
    };

 return this;
 });

路线配置

这是我正在努力的部分。在何处以及如何注入此服务？我得到了它的工作，但我不确定这是否是正确的处理方式。

在$stateProvider？

服务

基于AuthService的值重定向到视图
申请开始前的流程。

myApp.config(function($stateProvider, $urlRouterProvider ) {
   $urlRouterProvider.otherwise('/home');
   $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'MainController',
        resolve: ['AuthService', function(AuthService, $location, $q){
            var deferred = $q.defer();
            var authChk = AuthService.isAuthorized(); 
            authChk.then(function(data){
                if(!data){
                    $location.path('/register'); 
                    deferred.resolve();
                } else{
                    $location.path('/home');
                    deferred.resolve();
                }
            }, function(e){
                $location.path('/register');
                deferred.resolve();
            });
            return deferred.promise;
        }]
    })
    .state('register', {
        url: '/register',
        templateUrl: 'templates/register.html',
        controller  : 'RegisterController',
        resolve: ['AuthService', function(AuthService, $location, $q){
            var deferred = $q.defer();
            var authChk = AuthService.isAuthorized();
            authChk.then(function(data){
                if(!data){
                    $location.path('/register');
                    deferred.resolve();
                } else{
                    $location.path('/home');
                    deferred.resolve();
                }
            }, function(e){
                $location.path('/register');
                deferred.resolve();
            });
            return deferred.promise;
        }]
    })
});

这是运行此类身份验证验证的正确位置吗？

这是一个简单的Hello World演示，让我开始使用Angular。我没有导航（多个视图）所以检查应该是直接的。

我已经看到很多使用locationChangeStart在加载视图之前触发服务的示例。然后在处理会话时使用$scope.watch和$broadcast（也不是这种情况），但可能对将来的使用有用。

感谢。欢迎任何有关如何以及在何处处理此方案的建议。

Answer 1

这实际上是我必须要做的事情。您可以在每个州使用resolve。

在下面的代码中，我有一个resolveUserAuth函数，它将返回用户对象。

 var resolveUserAuth = {
    'userAuth': function (AuthService, $rootScope) {
      if ($rootScope.user) {
        return $rootScope.user;
      } else {
        return myApp._getUserAuth(AuthService, $rootScope);
      }
    }
  };

  $stateProvider
    .state('login', {
      url: '/login',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })
    .state('logout', {
      url: '/logout',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl',
      resolve: resolveUserAuth
    })

getUserAuth

myApp._getUserAuth = function (service, rootScope) {
  return service.getRole().then(function () {
    service.getUser().then(function (user) {
      rootScope.user = user;
    });
  });
};

登录

 service.login = function (data) {
    var promise = $http.post('/auth/login', data).then(function (response) { // Success
      $rootScope.user = response.data;
      AssignedService.get({},
        function(assigned) {
          $rootScope.assigned = assigned;
          $rootScope.showLogin = false;
        }, function(error) {
          if (console && console.error) {
            console.error('Error getting assigned: ', error);
          }
        }
      );
      return response;
    }, function() { // Error
      $rootScope.showAlert('Unable to login, please try again', 'danger');
    });

    return promise;
  };

AngularJS - 在app启动之前处理路由

1 个答案: