Я делаю свой первый проект AngularJS с бэкэндом ASP.NET Web API. Что я пытаюсь сделать, так это то, что всякий раз, когда пользователь посещает www.mydomain.com
, отображается страница входа (index.html
). После успешного входа в систему он будет перенаправлен на dashboard.html
(это страница оболочки, сюда идут частичные просмотры). Структура моего проекта показана ниже:
Меня смущают некоторые вопросы:
- Это лучшая/общая практика, которую я пытаюсь сделать выше?
- Поскольку
dashboard.html
является главной страницей, следует ли размещатьapp.js
наdashboard.html
? - Если я поставлю
app.js
наdashboard.html
, будет ли уindex.html
(страница входа) еще одинapp.js (i.e. loginApp.js)
? - Как мне управлять состоянием входа в систему, т.е. IsUserLoggedId, UserId и т. д. в угловой части?
Этот вопрос может быть глупым. Я гуглил, но не нашел ни одного примера/статьи, посвященной такой проблеме. Не могли бы вы помочь?
Заранее спасибо.
2 ответа
Я не уверен, как с этим справляется ASP.NET, но, насколько мне известно, ASP.NET - это просто серверная среда, тогда как AngularJS - клиентская среда. Эти два фреймворка решают разные задачи, но имеют некоторые перекрывающиеся функции. Если вы начнете использовать angularjs, то большую часть времени вы будете иметь дело с термином «Одностраничное приложение (SPA)».
Существуют разные подходы к тому, как вы можете обрабатывать перенаправление URL-адресов после входа в систему. Я просто покажу вам два примера. Существует еще много способов обработки аутентификации пользователя и сеанса.
Первый подход: В SPA большую часть времени браузер меняет маршрут и состояние URL-адреса непосредственно на самой странице, не запрашивая всю страницу с сервера. При этом ваш dashboard.html
, скорее всего, будет статическим файлом шаблона, который будет загружаться напрямую из браузера. (т. е. сервер не выполняет динамический анализ dashboard.html
, а служит только статическим файлом). После входа пользователя angularjs отправит асинхронный HTTP-запрос в конечную точку аутентификации ASP.NET. Успешный вход может вернуть маркер в браузер, и клиент будет использовать его для управления сеансом пользователя. При этом Angular должен будет изменить маршрут на /dashboard/
. Обратите внимание, что весь поток происходит прозрачно для пользователя, он не запускает HTTP-запрос полной страницы.
Второй подход: В качестве альтернативы, если вы решите перенаправить с сервера, вам придется отправить HTTP-перенаправление 302. и, поскольку HTTP-перенаправление в конечном итоге вызовет полный HTTP-запрос к /dashboard/
, и затем ему придется перезагрузить и загрузить angular app.js
снова из браузера. В этом случае пользователю придется ждать, пока страница панели инструментов будет обработана сервером при входе в систему.
Вопросы:
- Это лучшая/общая практика, которую я пытаюсь сделать выше? есть много подходов, я думаю, лучше всего найти тот, который подходит именно вам. Если у вас есть RESTful API, вы можете более подробно изучить подход SPA.
- Так как Dashboard.html является главной страницей, должен ли я помещать app.js на Dashboard.html? в SPA вам не нужно дважды загружать app.js. но если вы используете второй подход, вам придется снова перезагрузить
app.js
. - Если я помещу app.js на dashboard.html, будет ли index.html (страница входа) иметь другой app.js (т. е. loginApp.js)? зависит от вашего подхода, как указано выше
- Как мне управлять состоянием входа в систему, т.е. IsUserLoggedId, UserId и т. д. в угловой части? Стратегия аутентификации, < a href="http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/" rel="nofollow">Авторизация в стиле UNIX сильный>
Есть и другие официальные руководства, которые могут помочь Руководство разработчика AngularJS.
Надеюсь, это поможет вам интегрироваться с механизмом аутентификации ASP.NET.
У вас должно быть несколько страниц оболочки. эта ссылка может вам помочь ...
см. часть Multiple Shell Pages
.
Похожие вопросы
Новые вопросы
angularjs
Используйте для вопросов об AngularJS (1.x), JavaScript-фреймворке с открытым исходным кодом. НЕ используйте этот тег для Angular 2 или более поздних версий; вместо этого используйте тег [angular].