javascript - 使用应用程序级别的动态指令模板解析 AngularJS

Question

目前我正在使用 AngularJS 和 REST API 作为后端服务实现完全无状态的基于 token 的身份验证。这工作得很好，但关于一个我目前不知道的状态，想问你如何处理它。

我的意图只是将我的身份验证 token 从客户端保存在本地存储中。在从应用程序初始加载时，我想从 REST API (GET/me) 检索所有用户信息并将其保存在我的 AngularJS 项目的 $scope 中。

实现后，我有几个问题要确保检索到的用户信息已完全解析并可以使用这些信息(例如用户的访问权限)。

我只是想让你展示一个我遇到“异步问题”的例子。

angular.directive('myDirective', ['MyAsyncService', function(MyAsyncService) {
  return {
    restrict: 'E',
    templateUrl: function(element, attributes) {
      console.log(MyAsyncService.getData());
    } 
  }
}]

在这个例子中，当指令被呈现时，我的异步服务还没有信息。在 ngRoute/ui-router 的 resolve 函数或 AngularJS 的 run() 方法中检索异步数据也无法解决我的问题。

所以回到我的问题......最好在客户端保存一些用户信息来避免一些这样的问题？从我的 Angular 来看，出于安全目的，最好不要保存任何类型的用户信息(如访问权限、用户名、ID、电子邮件地址……)。

在基于 token 的 AngularJS 应用程序中，您如何处理身份验证和授权？

提前致谢，希望你能让我回到正轨。

Answer 1

您需要resolve() 身份验证 - 尤其是应用级别的这种类型的身份验证。

如果您没有使用 ui.router - 看看。

当我们在路线上 resolve() 时，我们所说的是 - 在这个东西完成它正在做的事情之前不要做任何其他事情。

这还假设您熟悉promises。

您的 resolve 依赖项最终会期望此异步请求返回一个 promise ，以便它可以在回调完成执行后链接 Controller 逻辑。

例如:

$stateProvider
  .state('myState', {
    resolve:{
      auth:  function($http){
        // $http returns a promise for the url data
        return $http({method: 'GET', url: '/myauth'});
      }
    },
    controller: function($scope, auth){
      $scope.simple = auth;
    }
});

但还有更多。如果您希望在任何 路由的应用程序执行开始时进行解析 - 您还需要链接状态声明:

$stateProvider
  .state('app', {
    abstract: true,
    templateUrl: 'app/views/app.tpl.html',
    resolve:{
      auth:  function($http){
        // $http returns a promise for the url data
        return $http({method: 'GET', url: '/myauth'});
      }
    },
    controller: function($scope, auth){
      $scope.resolvedauth = auth;
    }
  }
  .state('app.home', {
    url: '/home',
    templateUrl: 'home/views/home.tpl.html',
    controller: function($scope){
      //Should be available.
      console.log($scope.$parent.resolvedauth);
    }
  });

现在您的子级继承了应用级解析，您可以通过执行以下操作来控制模板:

.directive('myDirective', function() {
  return {
    templateUrl: function(elem, attr){
      return 'myDirective.'+attr.auth+'.html';
    }
  };
});

声明本身:

<my-directive auth="resolvedauth.status" />