为此,可以在 $stateProvider 中使用 服务 吗?

我已经阅读了很多关于路由的堆栈帖子,但大多数帖子都让初学者感到困惑,因为每个人都使用不同的方法并将其视为火箭科学。我想从一开始就养成好习惯,避免坏习惯……

目标 :在应用程序启动之前运行一些函数,并基于我的最终用户的输出路径。

我尝试过的:

实现一个服务>> AuthService |操作 >> 简单检查:

  • 从客户端 (SQLite DB) 获取 JWT token - token 包含基本详细信息 + API key
  • 发送到服务器进行认证
  • 响应( bool 值)
  • 如果获得授权 >> 加载主页 View 。否则,重定向到注册 View 。
  • 服务器端验证在加载任何 View 之前进行


  • 服务提供商
    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;
     });
    

    路由配置

    这是我正在努力解决的部分。在哪里以及如何注入(inject)此服务?我让它工作了,但我不确定这是否是处理它的正确方法。
  • $stateProvider 的 Resolve 属性中调用服务?
  • 基于 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。我没有导航(多 View ),所以检查应该是直接的。

    我见过很多使用 locationChangeStart 在加载 View 之前触发服务的示例。然后在处理 session 时使用 $scope.watch$broadcast(也不是这种情况),但可能对将来的使用有用。

    谢谢。欢迎任何有关如何以及在何处处理这种情况的建议。

    最佳答案

    这实际上也是我不得不做的事情。您可以在每个状态上使用 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
        })
    

    获取用户身份验证
    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;
      };
    

    关于javascript - AngularJS - 在应用程序启动之前处理路由,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26059656/

    10-16 09:58