Для этого вам нужно выполнить какой-то шаг.
1) Создайте простую форму входа: хорошо, вы идете.
2) Отправьте учетные данные пользователя на сервер. Вот простой сервис входа в систему, который вы можете использовать из своего компонента
@Injectable()
export class LoginService {
constructor(private http: HttpClient, private userStorage: UserStore) {
}
async login(credential: { email: string, password: string }): Promise<boolean> {
try {
const token = await this.http.post('/auth/authenticate', credential, { responseType: 'text' })
.pipe(share()).toPromise();
this.userStorage.setToken(token);
return true;
} catch (err) {
if (err.status !== HttpStatus.FORBIDDEN) {
throw err;
}
return false;
}
}
Здесь вы вызываете свой сервер в режиме POST с информацией о пользователе, и на этот раз вы получите зашифрованный токен, позволяющий вам получить доступ к функции API в зависимости от ваших привилегий. Обычно токен выглядит так:
Носитель eozaeza3e232az3eaze23zaeeo (стандартный токен аутентификации)
Мы держим этот токен в «хранилище», которое, например, может быть localstore / cookie. Вы можете создать угловой сервис, чтобы справиться с этим. Здесь я назвал его UserStore
3) На стороне сервера вам необходимо проверить пользовательский crendentiel, полученный вами в запросе «POST». Таким образом, вы просто делаете запрос sql в своей базе данных пользователей, чтобы узнать, нашли ли вы его ( не забудьте зашифровать свой пароль в базе данных ). Если вы не нашли его, отправьте неверный ответ.
4) Когда вы нашли пользователя, вам нужно создать токен. Вы можете использовать https://github.com/auth0/node-jsonwebtoken для этого. Токен - это простой зашифрованный объект, представляющий информацию о пользователе. Вот как вы можете его создать:
const jwtToken = jwt.sign({
email: account.email,
givenName: account.givenName,
role: account.role
}, Config.get().AUTH_JWT_KEY, { expiresIn: 3600 });
Config.get (). AUTH_JWT_KEY - это простая хешированная строка, представляющая «пароль» для шифрования токена. Маркер не должен быть незашифрованным на лицевой стороне , держите этот ключ на своей обратной стороне.
5) Сервер дает вам 200, и у вас есть ваш токен :). Теперь вы можете использовать его для вызова ограниченной конечной точки вашего API. Для этого вам нужно будет добавить этот токен в заголовки ваших запросов . В угловом коде есть то, что мы называем перехватчиком . Это сервис, который будет использоваться для выполнения некоторых действий при отправке http-запроса или при получении ответа. Благодаря ему вы сможете добавлять токен в каждый запрос.
Вы можете найти код здесь: Как обрабатывать ошибку 401 без проверки подлинности в Angular 6
6) Вашему серверу теперь нужно будет прочитать этот токен, чтобы узнать, может ли ваш пользователь иметь доступ к какой-либо конечной точке или нет. Ему нужно будет «расшифровать» токен, который ему дал пользователь, с помощью ключа «Config.get (). AUTH_JWT_KEY». Использование jsonwebtoken
const account = jwt.verify(token, Config.get().AUTH_JWT_KEY);
Здесь у вас есть учетная запись, теперь вы можете проверить разрешение пользователя и посмотреть, что он может сделать: D
7) Последняя небольшая часть. Вам также нужно будет «защитить» свой веб-интерфейс, чтобы люди не заходили на страницу, когда они не зарегистрированы. Вы можете проверить атрибут canActivate на угловом маршрутизаторе, который использует guard . Вот пример
const appRouter: Routes = [
{ path: 'login', component: LoginPage },
{
path: 'app', component: AppPage, canActivate: [EnsureUserAuthGuard], resolve: { user: UserResolve },
children: [
{ path: 'home', component: HomePage },
{ path: 'content', component: ContentPage }
]
}]
Чтобы получить доступ к страницам моего приложения (приложения) (домашняя страница / контент), вам необходимо передать EnsureUserAuthGuard. Это простой сервис, который проверяет, есть ли у пользователя токен в хранилище. Если у пользователя нет токена, он будет перенаправлен на страницу входа
@Injectable()
export class EnsureUserAuthGuard implements CanActivate {
constructor(private userStore: UserStore,
private router: Router) {
}
canActivate() {
if (!lodash.isEmpty(this.userStore.getToken())) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}