Angular, как проверить, обращается ли пользователь к этой странице, и заблокировать доступ для другого пользователя?
У меня есть страница с некоторыми данными.
<p-table [value] = "mnos" [(contextMenuSelection)] = "selectmno"
[contextMenu] = "cm" >
<ng-template pTemplate = "header" >
<tr>
<th >ID</th>
<th>Name</th>
</tr>
</ng-template>
<ng-template pTemplate = "body" let-mno>
<tr [pContextMenuRow] = "rowData" (click) = "test($event,mno)">
<td>{{mno.id}}</td>
<td>{{mno.name}}</td>
</tr>
</ng-template>
</p-table>
<p-contextMenu #cm [model] = "items"></p-contextMenu>
При нажатии на таблицу будет перенаправлено на другую страницу http://локальный:4200/тест. Как я могу заблокировать доступ пользователю, если кто-то уже был перенаправлен на эту страницу. Например, если я уже нахожусь на странице http://локальный:4200/тест, другому пользователю, который нажмет на таблицу, будет объявлено, что эта страница занята.
Это мой onClick:
test(event, mno){
console.info("On click",event,mno);
this.router.navigate(['/test']);
}
Я подумал, что можно установить флаг для этой страницы, например, если я обращаюсь к ней, флаг равен 1, если закрыть вкладку, флаг равен 0, а когда флаг равен 1, чтобы заблокировать доступ другим пользователям. Также у меня есть API для этого теста на Java.
Все посетители получат свой собственный набор приложений (HTML, Javascript и т. д.) при переходе на ваш веб-сайт, поэтому они не будут знать значение флага друг друга. Вы можете работать с только что упомянутым флагом, но вам все равно нужно получить значение флага (которое каким-то образом представляет сеанс, который я упомянул) из API.
Итак, я создам конечную точку, которая будет взаимодействовать с моим интерфейсом, но как установить эти флаги? У меня будет что-то, если флаг равен 1, тогда верните this.http.post<any>(${environment.apiUrl}/test,data), иначе заблокируйте доступ.
Ответы 1
После разговора в комментариях можно было сделать следующее.
Предположим, у вас есть следующие файлы.
test.component.ts
....
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent {
}
app.routing.ts
...
export const router: Routes = [
{path: 'test', component: TestComponent}
];
....
Вы хотите как-то проверить, есть ли уже активная сессия на тестовой странице.
Это идеальный вариант использования для защиты маршрута, по крайней мере, я убежден.
Вы можете создать защиту маршрута, которая будет выполнять вызов API, проверяющий, есть ли уже активный сеанс на тестовой странице. Конечно, вам нужно будет добавить еще немного логики, но это будут следующие шаги.
проверить-активный-session.guard.ts
....
@Injectable()
export class CheckActiveSessionGuard implements CanActivate {
constructor(private api: ApiService,
private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.apiService.activeTestSession().pipe(map(x => {
// x will be the response from the API
// Let's pretend it is returning a boolean.
// It will be true when there's already an active session and false if there's no active session
// true means user should not pass (because of an active session), false means a user can pass
if (!x) {
// No active session, user can pass
return true;
} else {
// Already an active sesssion, user should be redirected
this.router.navigate(['busy']);
return false;
}
}));
}
}
API.service.ts
...
public activeTestSession(): Observable<boolean> {
return this.httpClient.get<any>('api' + '/is_there_already_an_active_session, { observe: 'body', responseType: 'json' });
}
...
Затем добавьте защиту в свойство canActivate в маршрутизации:
app.routing.ts(Новый)
...
export const router: Routes = [
{path: 'test', component: TestComponent, canActivate: [CheckActiveSessionGuard]}
];
....
Думаю, это минимальная реализация того, как вы можете это сделать.
Я могу представить, что вы можете создать сеанс пользователя (когда пользователь посещает ваш сайт только один раз) и отправить идентификатор этого сеанса вместе с вызовом API, чтобы иметь возможность расширить функциональность.
Я думаю, вам придется придумать некоторую внутреннюю логику (API), которая отслеживает активные сеансы на
/test-странице, а затем написать защиту маршрута (например), которая проверяет, есть ли в данный момент активный сеанс на странице, если да то редирект на страницу с занят-объявлением. Поскольку Angular находится на стороне клиента, посетители не могут напрямую взаимодействовать друг с другом без связи с API или чем-то подобным.