جاوااسکریپت - الکترون جیاس: جلوگیری از ناوبری به یک مسیر مشخص

وقتی از loadURL برای بارگذاری وبسایتم استفاده میکنم، میخواهم از رفتن کاربران به دو صفحه جلوگیری کنم. نیاز دارم این کار را در داخل اپلیکیشن Electron انجام دهم.

برای مثال، در برنامه خود من در:

https://WebsiteApp.com

اما من میخواهم از هدایت به صفحه جلوگیری کنم:

https://WebsiteApp.com/security

آیا راهی وجود دارد که از پیمایش این مسیر جلوگیری کرد؟

pathname: '/security'

پاسخ شماره ۱

سعی کنید از «Route Guards» استفاده کنید، که همچنین به عنوان Navigation 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;
  }
}

همچنین، این کلاس باید رابط 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>;
}