Как сделать приложение Angular 5 + Node с аутентификацией CAS?
В настоящее время я пытаюсь создать приложение, которому требуется, чтобы пользователь аутентифицировался с помощью CAS (Centrale Authentication Service), чтобы использовать его. Я использую Angular 5 для внешнего интерфейса и Node.js для внутреннего интерфейса.
Для аутентификации пользователя на стороне сервера я использую модуль под названием «r-cas-authentication», который создает экспресс-сеанс при аутентификации пользователя. Дело в том, что я не знаю, как проверить на стороне Angular, аутентифицирован ли пользователь, и в противном случае перенаправить его на страницу аутентификации CAS.
Ты знаешь, как я мог это сделать? Спасибо!
Ответы 1
Вам не нужно заниматься этим на стороне angular. Просто сделайте так, чтобы сервер Node всегда перенаправлял неаутентифицированных пользователей на страницу входа. Браузер устанавливает заголовки сеанса, и ваш сервер Node увидит, что аутентификации нет, и отправит перенаправление. Модуль r-cas-authentication упоминает параметры bounce и bounce_redirect в документации, это еще больше упростит процесс.
Ваш экземпляр узла будет обслуживать страницу входа:
app.get('/login', (req, res) => res.sendFile('path/to/login.html'));
Кроме того, ваши активы (скрипты внешнего интерфейса, CSS, изображения и т. д.) (Обычно) могут иметь:
app.get('/assets', express.static(pathToStaticDirectory));
Также у вас есть конечная точка аутентификации:
app.get( '/authenticate', cas.bounce_redirect );
Затем он должен обслуживать приложение Angular. Однако здесь потребуется сеанс cas. Мы нацелены на '/home', но это может быть другой путь, например "/" или что-то еще.
app.get('/home', cas.bounce, express.static(pathToAngularAppDirectory);
Наконец, у вас, вероятно, будут конечные точки REST API, которые вы хотите защитить:
app.use('/api', cas.block, appRoutes);
Вот что происходит. Запрос приходит из браузера. Он попадает в маршрут '/home'. Поскольку браузер находится на первом посещении, заголовки аутентификации не заданы. Он попадет в блок cas.bounce() и будет перенаправлен на маршрут /login. Как только он попадает туда, он обслуживается login.html *.
Вы вводите свои данные для входа в систему и нажимаете кнопку входа в систему - страница отправляется, и промежуточное ПО cas аутентифицирует пользователя - устанавливает данные сеанса и все для браузера. Браузер позаботится об этом (заметьте, я говорю браузер, а не Angular). Он также перенаправляет пользователя обратно на домашнюю страницу.
Теперь ваш браузер имеет информацию о сеансе, поэтому он получает проход по маршруту, получает файлы Angular, приложение запускается нормально. Все круто.
Есть еще один случай, который вы могли бы решить с помощью Angular.
Допустим, ваша сессия истекла. И браузер остался открытым или что-то в этом роде. Пользователь повторно посещает страницу - все круто, cas.bounce перенаправит пользователя обратно в форму входа.
Но что, если пользователь просто нажимает кнопку «Обновить» в вашем приложении? Затем HttpClient Angular получает ответ 401 (согласно документации модуля узла). У вас может быть простой HTTP-перехватчик, который выполняет window.location.reload() или аналогичный (в основном полную перезагрузку страницы, а не навигацию на стороне клиента), и при перезагрузке страницы ваше приложение попадает в cas.bounce, потому что оно пытается перезагрузить / вернуться домой без аутентификации.
Это не имеет ничего общего с angular как таковым, это просто механизм браузера. Я расширю ответ, чтобы попытаться объяснить.
Спасибо за развернутый ответ, я сделал именно это, и он отлично сработал!
Спасибо за быстрый ответ. Но мне жаль, что я этого не понимаю. Если я вызываю сервер со стороны клиента, мне нужно будет перенаправить меня на страницу входа в CAS, работающую на другом сервере, и http-запрос от angular не будет правильным. Таким образом, перенаправление должно происходить со стороны Angular, и если я это сделаю хорошо, сервер аутентифицирует пользователя, но сеанс теряется, когда пользователь перенаправляется на исходную страницу.