Question

我的页面上有一些数据。

<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://localhost:4200/test。如果某人已经被重定向到该页面，该如何阻止对用户的访问。就像如果我已经在页面http://localhost:4200/test上一样，另一个将单击表的用户将被宣布此页面正忙。

这是我的onClick：

test(event, mno){
console.log("On click",event,mno);
this.router.navigate(['/test']);

}

Answer 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调用，以检查测试页上是否已有活动会话。当然，您将需要添加更多的逻辑，但这将是下一步。.

check-active-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]}
];
....

这是实现此目标的最低要求。
我可以想象您可以创建一个用户会话（当用户访问您的网站时，只需一次）并随同该会话ID以及api调用一起发送，以扩展功能。

Angular如何检查用户是否可以访问此页面并阻止其他用户访问？

1 个答案: