Redirect after user has logged in

Refresh

December 2018

Views

10.6k time

17

I'm pretty new to Angular, and right now I'm just trying to get all my routes set up and working as I'd like.

Setup: When a user navigates to certain pages (/settings for this example) the app should check if there is a user already logged in. If there is continue as usual. Otherwise the user should go to the login page (/login).

What I'd like: After the user has successfully logged in they should go to the page they were originally trying to get to (/settings)

My question: Is there an "Angular way" to remember where the user was trying to go to?

Relevant code:

app.js

  .when('/settings', {
      templateUrl: '/views/auth/settings.html',
      controller: 'SettingsCtrl',
      resolve: {
        currentUser: function($q, $location, Auth) {
          var deferred = $q.defer();

          var noUser = function() {
            //remember where the user was trying to go
            $location.path("/login")
          };

          Auth.checkLogin(function() {
            if (Auth.currentUser()) {
              deferred.resolve(Auth.currentUser());
            } else {
              deferred.reject(noUser());
            }
          });

          return deferred.promise;
        }
      }
    })

login.js

  $scope.submit = function() {
    if(!$scope.logInForm.$invalid) {
      Auth.login($scope.login, $scope.password, $scope.remember_me)
      //go to the page the user was trying to get to
    }
  };

Much thanks to John Lindquist for the video which got me this far.

1 answers

17

Во-первых, вы не хотите, чтобы перенаправить пользователя на страницу входа в систему.

Идеальный поток в одной странице веб-приложение выглядит следующим образом:

  1. Пользователь посещает веб-сайт. Веб-сайт отвечает со статическими активами для углового приложения на конкретном маршруте (например, / профиль / редактирование).

  2. Контроллер (для данного маршрута) делает вызов к API, используя $ HTTP, $ маршрута или другой механизм (например, для предварительного заполнения Редактировать профиль форму с деталями из вошедших в учетной записи пользователя с помощью GET к / API / v1 / пользователей / профиль)

  3. Если / в то время как клиент получает 401 от API, показать модальное для входа в систему, и повторит вызов API.

  4. Вызов API успешно (в этом случае пользователь может просматривать предварительно заполненную форму редактирования профиля для своей учетной записи.)

Как вы можете сделать # 3? Ответ $ HTTP Response перехватчики .

Для целей глобальной обработки ошибок, аутентификации или любого вида синхронной или асинхронной предварительной обработки полученных ответов, желательно , чтобы иметь возможность перехватывать ответы для запросов HTTP , прежде чем они будут переданы в коду приложения , которое инициировало эти запросы. В перехватчики ответ использовать Обещание APIs , чтобы выполнить эту необходимость как синхронной и асинхронной предварительной обработки.

http://docs.angularjs.org/api/ng.$http

Теперь, когда мы знаем, что идеальный пользовательский опыт должен быть, как мы это делаем?

Существует пример здесь: http://witoldsz.github.com/angular-http-auth/

Пример основан на этой статье:

http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

Удачи и счастливого Angularing!