라우팅 보호, 작업 및 웹 구성 요소 사용

웹 구성 요소만 사용하는 단일 페이지 응용 프로그램을 구축하고 있다고 가정합니다.하나의 보기를 정의하고 루트를 설정했으며 인증을 잘 처리했습니다.
갑자기 뷰 렌더링 여부를 결정하기 위해 자동 최적화를 관리해야 한다는 것을 알게 되었습니다.예를 들어, 권한 있는 사용자만을 위한 /admin 및 /analytics 라우팅이 필요할 수 있습니다.
이전 글에서 나는 Vaadin Router의 내비게이션 생명주기 기능을 사용하여 제한된 사용자가 페이지를 불러오는 것을 피하기 위해 규칙을 어떻게 정의하는지 설명했다.사실상 이러한 함수를 사용하는 해결 방안은 간단하고 고립된 보기에 매우 적합하다.
그러나 만약에 루트 차원 구조를 따라 이런 권한을 관리하거나 여러 개의 루트를 동시에 관리하려면 어떤 상황이 발생합니까?TypeScript 기반 LitElement Website을 사용하여 이러한 유형의 장면을 실제로 처리하는 방법을 살펴보겠습니다.

도로 경찰

루트 보호도 네비게이션 보호라고 하는데 가장 유행하는 구조에서 이루어진다. 예를 들어 Angular, Vue 등이다.다음 그림을 살펴보겠습니다.

보시다시피 공유기 설정에는 내부 논리가 있습니다.이렇게 하면 권한 수여 대상이나 다른 상태를 보고 관련 보기를 계속 보여주거나 방향을 바꿀 수 있습니다.

Using Custom Route Actions

LitElement-based website은 TypeScript 및 Vaadin Router을 기반으로 라우팅 관리를 수행합니다.
Vaadin 라우터는 Custom Route Actions 구성을 고급 용례로 사용할 수 있음을 증명합니다.
이 라우팅 라이브러리는 기본 라우팅 해결 규칙을 사용자화하는 유연한 API를 제공합니다.각 라우팅에는 라우팅 해석에 대한 다른 동작을 정의하는 action 속성이 있을 수 있습니다.

const routes: Route[] = [
  {
    path: '/',
    component: 'lit-component',
    action: async () => {
      ...
    },
  }
]

context과 commands을 매개 변수로 사용할 수 있습니다.

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

const routes: Route[] = [
  {
    path: '/',
    component: 'lit-component',
    action: async (context: Context, commands: Commands) => {
      ...
    },
  }
]

context 매개 변수와 그 속성을 살펴보겠습니다.
재산.
타입
묘사context.pathnamestring해결 중인 경로 이름context.searchstring검색 검색 문자열context.hashstring해싱 문자열context.paramsIndexedParams라우팅 매개 변수 객체context.routeRoute현재 렌더링 중인 라우팅context.next()function함수가 다음 루트 내용을 비동기적으로 가져옵니다.결과: Promise<ActionResult>다른 한편, commands 매개 변수는 다음과 같은 방법을 가진 보조 대상을 포함한다.
행동
결과 유형
묘사commands.redirect('/path')RedirectResult리디렉션 명령 생성 및 반환commands.prevent()PreventResultprevent 명령 생성 및 반환commands.component('tag-name')ComponentResult새 HTMLElement을 생성하여 라우터 출구로 렌더링

노선 경비를 실시하다

route guards를 구현하기 전에 다음 구조를 정의합니다.

|- src/
    |- about/
    |- blog/
    |- admin/
    |- analytics/
    |- shared/
        |- auth/

이제 두 가지 구현 방법을 고려할 수 있습니다.

클래스 기반 솔루션

만약 나처럼 대상을 향한 배경이 있다면, 이 모델은 장래에 쉽게 확장되고 유지보수될 수 있는 유형 모델을 실현하는 것을 고려할 수 있다.AuthorizationService가지 정의부터 시작하겠습니다.다음 파일 shared/auth/authorization-service.ts을 만들고 다음 코드 행을 추가합니다.

// authorization-service.ts

export class AuthorizationService {
  private readonly key = 'key'; // Identifier for your key/token

  public isAuthorized(): Promise<boolean> {
    const token = this.getToken();
    return new Promise((resolve, reject) => {
      resolve(token !== null); // try using resolve(true) for testing
    });
  }

  setToken(token: string): void {
    localStorage.setItem(this.key, token);
  }

  getToken(): string | null {
    return localStorage.getItem(this.key);
  }
}

보시다시피 이 클래스는 실례화 대상이 준비되어 있습니다. isAuthorized() 함수를 호출하면 사용자가 루트에 접근해야 하는지 여부를 알 수 있습니다.141560 이 함수는 비동기 조작을 되돌릴 수 있기 때문에 이 함수는 비동기 조작을 되돌릴 수 있다.Promise과 setToken 함수는 Local Storage을 사용하여 사용자에게 영패 값을 저장할 수 있습니다.물론 이것은 간단한 처리 방법이다.
임시 값을 저장하는 다른 방법을 고려할 수 있습니다. 예를 들어 Cookies, 심지어 Session Storage.모든 옵션의 이해득실을 따져보는 것이 좋다는 것을 명심해라.
이 파일 서비스를 통해 영패를 추가하지 않으면 테스트에서 getToken을 사용해 보십시오.
다음은 다음과 같이 resolve(true) 파일에 AuthGuard 클래스를 만듭니다.

// 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/auth-guard.ts은 AuthGuard에서 내부 실례를 만들어 AuthorizationService 함수 검증을 통해 접근할 것을 기대합니다.
또한 pageEnabled에 정의된 PageEnabled 인터페이스를 구현해야 합니다.

//page-enabled.ts

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

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

이 인터페이스는 루트 설정에 추가된 모든 인증 보호 계약을 충당할 수 있습니다.
마지막으로 분석 페이지에 라우팅 구성을 추가합니다.

// index.ts
import { AuthGuard } from './shared/auth/auth-guard';

const routes: Route[] = [
  {
    path: 'analytics',
    component: 'lit-analytics',
    action: async (context: Context, commands: Commands) => {
      return await new AuthGuard().pageEnabled(context, commands, '/blog');
    },
    children: [
      {
        path: '/', // Default component view for /analytics route
        component: "lit-analytics-home",
        action: async () => {
          await import('./analytics/analytics-home');
        },
      },
      {
        path: ':period', // /analytics/day, /analytics/week, etc
        component: 'lit-analytics-period',
        action: async () => {
          await import('./analytics/analytics-period');
        },
      },
    ]
  },
];

/shared/auth/page-enabled.ts 매개 변수를 주의하면 이 함수는 새로운 action 실례를 만들고 현재 사용자가 AuthGuard 루트와 하위 레벨에 접근할 수 있는지 확인합니다.

함수 기반 솔루션

JavaScript 메서드에 클래스가 없거나 Auth Guard에 함수를 추가하려는 경우 다음과 같이 만들 수 있습니다.

// auth-guard.ts

export async function authGuard(context: Context, commands: Commands) {
  const isAuthenticated = await new AuthorizationService().isAuthorized();

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

    return undefined;
}

이것은 이전 예시와 다른 점은 이 함수가 경로를 바꾸는 추가 인자를 설정하는 것을 지원하지 않는다는 것이다.그러나 이 기능은 경로 구성에서 더 쉽게 사용할 수 있습니다.

// index.ts
import { authGuard } from './shared/auth/auth-guard';

const routes: Route[] = [
  {
    path: 'analytics',
    component: 'lit-analytics',
    action: authGuard, // authGuard function reference
    children: [
      ...
    ]
  },
];

완료되면 /analytics 또는 http://localhost:8000/analytics을 로드하여 무단 다음 결과를 확인합니다.

이 예에서 사용자는 http://localhost:8000/analytics/month 경로로 변경됩니다.
그렇지 않으면 이러한 라우트에 액세스할 수 있습니다(/blog 파일에서 검증을 위해 resolve(token !== null)을 resolve(true)으로 변경한 것을 기억하십시오).
이제 Auth Guard를 하나 이상의 라우팅에 사용할 수 있습니다!

Source Code Project

이 GitHub 저장소에서 전체 항목을 찾습니다. https://github.com/luixaviles/litelement-website.별 하나 주는 거 잊지 마.⭐️ 코드를 가지고 놀다.
너는 계속 나를 주목할 수 있다. GitHub은 나의 일에 대해 더 많은 정보를 얻을 수 있다.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소, GraphQL, Node, Bazel 또는 Polymer에 대한 전문가 아키텍처 지침, 교육 또는 컨설팅은 thisdotlabs.com을 참조하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdot.co을 참조하십시오.