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

Question

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

Следует использовать отдельный вид: скажем, я использую angular-ui-router и определяю вид верхнего уровня с двумя состояниями: логином и приборной панелью.

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

Во-вторых, это просто использовать нг-если:

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

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

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

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

Answer 1

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

Answer 2

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

---

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

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

Вы можете либо:

1. Изменение модуля и прикрепить его на свой собственный API, или
2. вместе Используйте модуль с UserApp (облако основе управления пользователями API)

Если вы используете UserApp, вы не будете необходимо написать любой серверный код для пользовательского материала (более чем проверку маркера). Возьмите course on 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), чтобы проверить, действителен ли токен.

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