javascript - Electron JS：防止导航到特定的路径名

当使用 loadURL 加载我的网站时，我希望阻止用户浏览两个页面。我需要在 Electron 应用程序中执行此操作。

例如，在我的应用程序中，我在：

https://WebsiteApp.com

但是我想防止导航到该页面：

https://WebsiteApp.com/security

有办法防止这个路径的导航吗？

pathname: '/security'

答案＃1

尝试使用 'Route Guards'，它也被称为 导航守卫，在一些框架中实现，比如 Angular 或 Vue，在这种情况下，React 使用 React Router 和 hooks 来实现，包括 TypeScript。

无论如何，查看这个解释，你可以根据授权等级等重定向页面，这是详细的解释，但可能对你有帮助。

这个 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;
  }
}

此外，这个类需要实现定义在 /shared/auth/page-enabled.ts 中的 PageEnabled 接口

//page-enabled.ts

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

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