angularjs app登录后重定向

时间:2016-08-23 22:51:09

标签: javascript angularjs redirect

目前,当用户登录时,登录页面不会重定向到主页。

'use strict';

angular.module('myapp').service('auth', function auth($http, API_URL, authToken, $state, $window, $q) {
  function authSuccessful(res) {
    authToken.setToken(res.token);
    $state.go('main');
  }

  this.login = function (email, password) {
    return $http.post(API_URL + 'login', {
      email: email,
      password: password
    }).success(authSuccessful);
  }

  this.register = function (email, password) {
    return $http.post(API_URL + 'register', {
      email: email,
      password: password
    }).success(authSuccessful);
  }

但是,我已将$state.go设置为重定向到main。问题出在哪儿?为什么不重定向?

附件

这是我的login.js控制器,看起来如何:

angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $auth) {

  $scope.submit = function () {
    $auth.login({
      email: $scope.email,
      password: $scope.password
    })
      .then(function(res) {
        var message = 'Thanks for coming back ' + res.data.user.email + '!';
        if (!res.data.user.active)
          message = 'Just a reminder, please activate your account soon :)';

        alert('success', 'Welcome', message);
      })
      .catch(handleError);
  }
  // i forgot to include this error handler in my code:
  function handleError(err) {
    alert('warning', 'oops there is a problem!', err.message);
  }
});

1 个答案:

答案 0 :(得分:1)

由于这是异步操作,因此angular不知道操作何时完成,因此何时更新$ scope。为此,您需要手动调用$ scope.apply(),但由于您无法访问服务中的$ scope,因此需要将重定向逻辑(即$state.go('main'))移到内部一个控制器,并按如下方式调用它:

angular.module('myapp').controller('LoginCtrl', function($scope, auth, $state) {

 function redirect(res) {
    $state.go('main');

    // manually update the scope
    $scope.$apply();
  }

  auth.login(email, password)
      .success(redirect);
});

编辑:与给定的控制器集成

angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $auth) {

    $scope.submit = function () {
        $auth.login({
          email: $scope.email,
          password: $scope.password
        })
            .then(function(res) {
              var message = 'Thanks for coming back ' + res.data.user.email + '!';
              if (!res.data.user.active) {
                message = 'Just a reminder, please activate your account soon :)';
              }

              alert('success', 'Welcome', message);

              return null;
            })
            .then(function() {
              $state.go('main');

              // manually update the scope
              $scope.$apply();
            })
            // google replacement of the above commented out code bit
            .catch(handleError);
      }
    });

编辑2 :使用$ timeout而不是$ scope。$ apply,这样就不会出现$ digest错误。

angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $auth, $timeout) {

    ...
    .then(function() {
      // $timeout calls $scope.$apply() by default, 
      // but it does it in a safely manner - never throws a '$digest already in progress' exception 
      $timeout(function() {
         $state.go('main');
      });
    })
    ...