Аутентификация и авторизация в AngularJS

Question

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

Однако у меня есть несколько осложнений, когда речь заходит об аутентификации и авторизации в AngularJS. В частности, AngularJS с ASP.NET Web API в качестве бэкэнд.

1. После аутентификации и получить маркер из API, я бы себе представить, используя Angularjs хранить маркер в куки. Таким образом, любые дополнительные запросы будут включать токен. Скажем почему-то, токен истекает, следующий запрос angularjs на api потерпит неудачу с несанкционированным. Однако на стороне клиента угловой считает, что он аутентифицирован (файлы cookie) и будет продолжать использовать этот недопустимый токен для всех запросов. Я могу подумать о решении, которое заключается в проверке «несанкционированного» ответа на каждый запрос и переадресации на логин, если это так. Но меня, наверное, застрелили бы за такую ​​практику.

2. В ASP.NET MVC защита определенной страницы/ресурса так же просто, как добавление [Авторизация]. Но в угловом, это кажется очень сложным. Как много защищать многие страницы против не прошедших проверку подлинности? Должен ли я настраивать и перехватывать для каждого маршрута и т. Д.?

3. То же самое касается авторизации, что делать, если аутентифицированный пользователь пытается получить доступ, скажем, к панели администратора или к частям панели администратора. Как перенаправить на несанкционированную страницу, если они обращаются по прямому URL.

Answer 1

Существует множество способов решения вашей дилеммы, но позвольте мне дать вам несколько советов, которые я обычно использую для аутентификации и авторизации.

Ваше приложение должно пройти аутентификацию с помощью API (независимо от .NET или иным образом), что может произойти с помощью запроса на вход, который устанавливает cookie (во время перенаправления сервера) или, возможно, конечную точку входа, возвращает токен (например, используя oAuth). В любом случае вам нужно сохранить токен авторизации, чтобы он мог получить доступ к нему. Я сам использую файлы cookie или localStorage. Затем, когда пользователь аутентифицирован, у меня есть хранилище пользовательских сервисов, поэтому я могу использовать его в любом месте приложения.

Как только это произойдет, вы можете использовать request http interceptors, чтобы прикрепить заголовок авторизации к вашему запросу. Вы также можете использовать перехватчик ошибок ответа, чтобы поймать, когда токен больше не принят (обычно код состояния 401, легко проверить) и принудительно вводит логин. Это должно решить проблему №1, которую вы поднимаете.

Затем для выпуска № 2 и № 3, если вы используете uiRouter, вы можете слушать state change events (в частности, $stateChangeStart). Если у меня есть страница администратора, я назову ее admin.whatever, а затем будет событие изменения, которое проверяет, имеет ли состояние администратор или нет, и перенаправляет пользователей, которые не являются админами. Аналогичным образом, я могу сделать то же самое для всех состояний, чтобы определить, нет ли в данный момент зарегистрированного пользователя и принудительно перенаправляет логин.

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

Answer 2

Это не совсем ответ, но я нахожусь в той же лодке, что и вы. Я создал некоторые основные угловые страницы и небольшое приложение для SPA, но теперь я пытаюсь связать все это с MVC-приложением, используя .Net Identity. Удивительно, что в этой теме не так много. Я натолкнулся на хороший пример, но это было с .Net Core и MVC 6, которые я еще не готов вскочить. Это стоит посмотреть и дать вам некоторые идеи.

http://stephenwalther.com/archive/2015/01/29/asp-net-5-and-angularjs-part-6-security

Пару дней назад я наткнулся на это видео и, по большей части, кажется, для решения этой проблемы. Это единственное, что я нашел до сих пор с MVC 5, Angular и некоторыми .Net Authorization. Взгляните и посмотрите, дадут ли вам какие-либо идеи. У меня еще не было возможности реализовать его, но я надеюсь начать работу в ближайшие пару дней. Если вы узнаете что-нибудь, опубликуйте здесь.

https://www.youtube.com/watch?v=f67PFtrldGQ&nohtml5=False