Страница входа в AngularJS

У меня есть веб-приложение, в котором требуется взаимодействие всех взаимодействий. Я вижу, по крайней мере, два способа реализации просмотра страницы входа в AngularJS.

Один из них заключается в использовании отдельного представления: пусть я использую angular -ui-router и определяю представление верхнего уровня с двумя состояниями: login и панель инструментов.

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/login");
  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "partials/login.html"
    })
    .state('mainpage', {
      url: "/mainpage",
      templateUrl: "partials/mainpage.html",
      controller: function($scope) {
        …
      }
    });

Во-вторых, нужно просто использовать ng-if:

<span ng-if="loggedin">
  … my main page …
</span>
<span ng-if="!loggedin">
  … login page …
</span>

Я вижу, что второй вариант легко позволит пользователям ссылаться на определенные разделы своих страниц, при этом автоматически открывается страница входа в систему, тогда как первый вариант потребует от меня кода для перенаправления, чтобы это произошло.

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

Теперь я начинаю с AngularJS, поэтому у меня недостаточно опыта, чтобы принять решение по любому из этих вариантов. Какой из них более желателен?

ОТВЕТЫ

Ответ 1

Я ответил на аналогичный вопрос: AngularJS Authentication + RESTful API

Я написал модуль AngularJS для UserApp, который поддерживает защищенные/общедоступные маршруты, перенаправление при входе/выходе из системы, сердцебиение для проверки состояния, сохранение токена сеанса в cookie, директивы для регистрации/входа/выхода из системы и т.д.

https://github.com/userapp-io/userapp-angular

Вы можете:

  • Измените модуль и добавьте его в свой собственный API или
  • Используйте модуль вместе с UserApp (облачный API управления пользователями)

Если вы используете UserApp, вам не нужно будет писать какой-либо серверный код для пользовательских материалов (более чем проверку маркера). Возьмите курс по Codecademy, чтобы попробовать.

Вот несколько примеров того, как это работает:

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

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

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

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

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

    <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>

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

    <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>

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

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

    (Завершает сеанс и перенаправляет маршрут входа в систему)

  • Доступ к свойствам пользователя:

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

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

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

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

  • Показать элемент на основе разрешений:

    <div ua-has-permission="admin">You are an admin</div>

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

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

Ответ 2

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