尝试使用“Route Guard”，它也称为Navigation Guard，在某些框架（如Angular或Vue）中实现，在这种情况下，使用React路由器和挂钩（包括打字脚本）进行React。
无论如何，检查this explanation，在那里你可以根据授权级别等重定向页面，这是一个很长的解释，但可能会帮助你。

此AuthGuard实现需要从AuthorizationService创建一个内部示例，以验证通过pageEnabled函数进行的访问。

// auth-guard.ts

import { Commands, Context, RedirectResult } from '@vaadin/router';
import { AuthorizationService } from './authorization-service';
import { PageEnabled } from './page-enabled';

export class AuthGuard implements PageEnabled {

  private authService: AuthorizationService;

  constructor() {
    this.authService = new AuthorizationService();
  }

  public async pageEnabled(context: Context, commands: Commands, pathRedirect?: string): Promise<RedirectResult | undefined> {
    const isAuthenticated = await this.authService.isAuthorized();

    if(!isAuthenticated) {
      console.warn('User not authorized', context.pathname);
     return commands.redirect(pathRedirect? pathRedirect: '/');
    }

    return undefined;
  }
}

此外，此类还需要将PageEnabled接口定义到/shared/auth/page-enabled.ts

//page-enabled.ts

import { Commands, Context, RedirectResult } from '@vaadin/router';

export interface PageEnabled {
  pageEnabled(
    context: Context,
    commands: Commands,
    pathRedirect?: string
  ): Promise<RedirectResult | undefined>;
}

中