Одной из основных частей веб-страницы является авторизация. Сегодня я расскажу, как реализовать простую авторизацию для страницы.
Я предполагаю, что у вас уже есть проект Angular 4.x. Прежде всего, мы создадим класс с именем PageAuthorization, как показано ниже:
Здесь мы импортировали Маршрутизатор и CanActivate, а наш класс реализует CanActivate. Здесь у нас есть метод canActivate, и позже мы будем использовать его в конфигурации нашего корня.
Существует логическая переменная с именем isLoggedIn. Если значение этой переменной равно true, метод canActivate вернет значение true, и пользователи смогут получить доступ к нашим страницам, если значение равно false, они не смогут получить доступ к нашим страницам, и мы будем перенаправлены на « /». Поэтому, чтобы использовать этот класс в существующем проекте Angular, вам нужно установить значение переменной isLoggedIn.
Теперь в вашем файле app.module.ts определите маршруты, как показано ниже:
const appRoutes: Routes = [
{ path: 'somepath', component: SomeComponent, canActivate: [PageAuthorization] },
];
и добавьте наш класс PageAuthorization к провайдерам, как показано ниже:
providers: [SomeComponent, PageAuthorization],
и не забудьте импортировать наш класс в файл app.module.ts:
import { PageAuthorization} from './PageAuthorization';
Вот и все. Теперь, если вы хотите перейти по URL-адресу «/somepath», наш класс авторизации запустит метод canActivate, и если он вернет true, вы сможете получить доступ к маршруту, иначе — нет.
