Question

我正在尝试使用网络框架Flask作为后端，AngularJS作为前端，在Flask中有一个名为 flask_login的扩展名具有保存用户对象的函数current_user，我可以从模板中的任何位置访问用户。

我所面临的主要问题是我不知道如何解决这个问题，我需要将用户对象保存在$ scope中，以便我可以在用户后获取有关用户的任何信息登录，例如：

<div class="books">
    <div class="profile" id="{{ current_user.public_id }}">
        <img src="http://www.placehold.it/200x200" class="img-responsive img-circle">
        <h4>{{ current_user.username }}</h4>
        <p>{{ current_user.email }}</p>
    </div>
</div>

这里我使用简单的jinja2代码来获取用户信息，我需要这样做：

<div class="books" ng-controller="myApp.user.controller">
    <div class="profile" id="<% $scope.current_user.public_id %>">
        <img src="http://www.placehold.it/200x200" class="img-responsive img-circle">
        <h4><% $scope.current_user.username %></h4>
        <p><% $scope.current_user.email %></p>
    </div>
</div>

以下是 view.py ，其中处理登录过程：

@app.route('/api/login', methods=['POST'])
def login():
    json_data = request.json
    user = User.query.filter_by(email=json_data['email']).first()
    if user and bcrypt.check_password_hash(
            user.password, json_data['password']):
        session['logged_in'] = True
        session['logged_email'] = user.email
        status = True
        g.user = user.email
    else:
        status = False
    return jsonify({'result': status})


@app.route('/api/status')
def status():
    if session.get('logged_in'):
        if session['logged_in']:
            return jsonify({'status': True, 'user':g.user.email})
    else:
        return jsonify({'status': False})

这是我的角度代码：

myApp.run(function ($rootScope, $location, $route, AuthService) {
  $rootScope.$on('$routeChangeStart',
    function (event, next, current) {
      AuthService.getUserStatus()
      .then(function(){
        if (next.access.restricted && !AuthService.isLoggedIn()){
          $location.path('/login');
          $route.reload();
        }
        console.log(AuthService.getUserStatus());
      });
  });
});

angular.module('myApp').factory('AuthService',
  ['$q', '$timeout', '$http',
  function ($q, $timeout, $http) {

    // create user variable
    var user = null;
    var email = null;

    // return available functions for use in controllers
    return ({
      isLoggedIn: isLoggedIn,
      login: login,
      logout: logout,
      register: register,
      getUserStatus: getUserStatus
    });

    function isLoggedIn() {
      if(user) {
        return true;
      } else {
        return false;
      }
    }

    function login(email, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/api/login', {email: email, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.result){
            user = true;

            deferred.resolve();
          } else {
            user = false;
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });
      // return promise object
      return deferred.promise;

    }

    function getUserStatus() {
      return $http.get('/api/status')
      // handle success
      .success(function (data) {
        if(data.status){
          user = true;
          email = data.user;
        } else {
          user = false;
        }
      })
      // handle error
      .error(function (data) {
        user = false;
      });
    }

}]);

如果您在此处注意到 console.log（AuthService.getUserStatus（））; 在控制台内，我可以看到数据包含用户电子邮件地址。

请提出任何建议我如何才能做到这一点？

Answer 1

$q和有角度的承诺解决了我的问题。我使用$q服务来设置一个promise，我将在我的用户控制器中访问：

function currentUser(){
  var deferred = $q.defer();
  $http.get('/api/current_user')
  .success(function(data){
    if (data.status){
      user = true;
      deferred.resolve(data);
      // console.log(data.user);
    } else {
      user = false;
      deferred.reject();
    }
  })
  .error(function(data){
    user = false;
    deferred.reject(data);
  });
  return deferred.promise;
}

我还利用 $ http 向我已经在我的应用程序后端设置的route / api / current_user端点发送了一个AJAX请求。

根据返回的响应，我接受或拒绝该对象，并将user的值设置为true或false。

既然我有一个承诺，我需要更新我的控制器内的服务交互，因为我无法从 Object。$$ state.value 访问数据，所以：< / p>

angular.module('myApp').controller('userController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
    AuthService.currentUser().then(function(data) {
    $scope.user = data.user;
    });
}]);

现在我可以从模板中获取数据：

<div class="books" ng-controller="userController">
    <div class="profile" id="<% user.public_id %>">
        <img src="<% user.avatar %>" class="img-responsive img-circle">
        <h4><% user.email %></h4>
        <p><% user.joined  | amUtc | amLocal | amTimezone:'Europe/Moscow' | amDateFormat:'YYYY.MM.DD HH:mm:ss' %></p>
    </div>
</div>

我要感谢 @Alon Eitan 帮助解决此问题，感谢:)。

如何在AngularJS中将用户对象保存到$ scope中？

1 个答案: