Как обрабатывать аутентификацию в приложении Angular JS

Ответ 1

Я не уверен в вашем бэкэнде, но вот как я это сделаю

• Создайте отдельную страницу входа (выделенный url не angular sub view или модальный диалог).
• Если пользователь не аутентифицирован, перенаправляется на этот логин стр. Это делается перенаправлением сервера. Эта страница может использовать или не использовать angular, поскольку он просто включает в себя отправку пользователя \password для сервер.
• Сделайте запрос POST (не AJAX) на странице входа и проверьте на сервере.
• На сервере установите auth cookie. (Различные структуры делают это по-другому. ASP.Net устанавливает форму cookie для проверки подлинности.)
• После аутентификации пользователя перенаправляет пользователя в действительное приложение angular и загружает все его компоненты.

Это позволяет сохранить любой код для управления аутентификацией на стороне клиента в Angular. Если пользователь приземлился на эту страницу, он аутентифицирован и имеет файл cookie.

Также поведение браузера по умолчанию заключается в том, чтобы отправлять все куки, связанные с доменом, с каждым запросом, поэтому вам не нужно беспокоиться, если angular отправляет некоторый файл cookie или нет.

Ответ 2

Я использую http-auth-перехватчик. http://ngmodules.org/modules/http-auth-interceptor

В моем backend (asp.net mvc) я создаю простую службу аутентификации и возвращаю http-ошибку 401, если пользователь не аутентифицирован. Затем я обрабатываю ошибку с видом входа в сайт SPA.

Ответ 3

Идеи, изложенные в предыдущих ответах, будут работать, но я думаю, что они переборщились. Вам не нужно ничего такого сложного.

как я могу добавить информацию cookie при следующем вызове REST

Включите withCredentials по умолчанию внутри $httpProvider следующим образом:

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.withCredentials = true;
}]);

Затем удалите шаблон (если он у вас есть) из заголовков, связанных с CORS, и установите учетные данные разрешений на стороне сервера. В моем случае, используя Python + Flask + Flask-Restful, он очень прост и выглядит следующим образом:

import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
api.decorators = [cors.crossdomain(origin='http://localhost:8100', credentials=True)]

Теперь cookie будет установлен и автоматически передан браузером автоматически и прозрачно. См. Эти темы для получения дополнительной информации:

• $http response Set-Cookie недоступен
• Angularjs $http, похоже, не понимает "Set-Cookie" в ответе

когда пользователь будет перемещаться по всему приложению после входа в систему. Я хочу каждый раз проверять isAuthenticaed true или false

Как было предложено выше, верните сервер 401, если сеанс аутентификации истекает или удаляется, и используйте $httpInterceptor в Angular, чтобы поймать его так:

app.config(function($httpProvider) {
    var interceptor =
        function($q, $rootScope) {
            return {
                'response': function(response) {
                    return response;
                 },
                'responseError': function(rejection) {
                    if (rejection.status==401) {
                        // Modify this part to suit your needs.
                        // In my case I broadcast a message which is
                        // picked up elsewhere to show the login screen.
                        if (!rejection.config.url.endsWith('/login'))
                        {
                            $rootScope.$broadcast('auth:loginRequired');
                        }
                    }

                    return $q.reject(rejection)
                 }
            }
        };

    $httpProvider.interceptors.push(interceptor);
});

Ответ 4

(раскрытие: я являюсь одним из разработчиков UserApp)

Для этого вы можете использовать сторонний сервис UserApp вместе с модуль AngularJS.

Ознакомьтесь с руководством по началу работы или выберите курс на Codecademy. Вот несколько примеров того, как это работает:

• Форма входа с обработкой ошибок:

  <form ua-login ua-error="error-msg">
      <input name="login" placeholder="Username"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Log in</button>
      <p id="error-msg"></p>
  </form>
  

  Доступ к информации о пользователе осуществляется с помощью службы user: user.current.email

  Или в шаблоне: <span>{{ user.email }}</span>

• Регистрация формы с обработкой ошибок:

  <form ua-signup ua-error="error-msg">
      <input name="first_name" placeholder="Your name"><br>
      <input name="login" ua-is-email placeholder="Email"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Create account</button>
      <p id="error-msg"></p>
  </form>
  

  ua-is-email означает, что имя пользователя совпадает с именем электронной почты.

• Как указать маршруты, которые должны быть общедоступными, и какой маршрут является формой входа в систему:

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
  

  Маршрут .otherwise() должен быть установлен в том месте, где вы хотите, чтобы ваши пользователи были перенаправлены после входа в систему. Пример:

  $routeProvider.otherwise({redirectTo: '/home'});

• Выход из системы:

  <a href="#" ua-logout>Log Out</a>

• Скрыть элементы, которые должны отображаться только при входе в систему:

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

Чтобы аутентифицировать ваши внутренние службы, просто используйте user.token(), чтобы получить токен сеанса и отправить его с помощью запроса AJAX. В фоновом режиме используйте UserApp API, чтобы проверить, действителен ли токен.

Если вам нужна помощь, просто дайте мне знать:)