Перенаправление после входа пользователя

Я новичок в Angular, и сейчас я просто пытаюсь настроить все свои маршруты и работать так, как мне хотелось бы.

Настройка. Когда пользователь переходит на определенные страницы (в данном примере /settings), приложение должно проверять, не авторизовался ли уже пользователь. Если есть, продолжайте как обычно. В противном случае пользователь должен перейти на страницу входа (/login).

Что я хочу: после того, как пользователь успешно войдет в систему, он должен перейти на страницу, на которую изначально пытался попасть (/settings)

Мой вопрос: есть ли "угловой способ" запомнить, куда пользователь пытался перейти?

Соответствующий код:

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;
        }
      }
    })

логин.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
    }
  };

Большое спасибо Джону Линдквисту за видео, благодаря которому я так далеко продвинулся.


person Lucy Bain    schedule 06.03.2013    source источник
comment
Вы можете хранить эту информацию в $rootScope или в службе.   -  person Mark Rajcok    schedule 07.03.2013


Ответы (1)


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

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

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

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

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

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

Как сделать №3? Ответ: $http Перехватчики ответов.

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

http://docs.angularjs.org/api/ng.%24http

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

Вот пример: http://witoldsz.github.com/angular-http-auth/

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

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

Удачи и удачного Angularing!

person vlad    schedule 07.03.2013
comment
Я не согласен с вашим утверждением о том, что вы не хотите перенаправлять. Я использую http-перехватчик, чтобы поймать 401 и отобразить модальный вход в систему. У него есть одна серьезная проблема, которую мой клиент не примет - на странице с ошибкой есть видимая часть приложения - рендеринг ng-view, но компоненты пусты, потому что 401 запрашивает ресурсы из API. Но страница (интерфейс) видна и совершенно непривилегированному посетителю. - person srigi; 30.09.2013