Use Angular Route-Guards to Secure Angular Pages — By allow, deny or redirect to other page-view. の翻訳

medium の Use Angular Route-Guards to Secure Angular Pages — By allow, deny or redirect to other page-view. の翻訳です。

ルートガードを使用してAngularページを保護するのは非常に簡単です。

f:id:ic_lifewood:20200103214717p:plain

ルートガードは、ユーザーがログインしているかどうかに基づいて、何らかのロジックに基づいてルートページへのユーザーアクセスを許可または拒否する、Angular Routerの重要な機能です。

ログイン/ログアウトのシナリオがあるアプリケーションでは、ルートガードは非常に重要です。
通常、ユーザーがログインしていて、ページにアクセスする権限があるかどうかを確認するために使用されます。
ログインしているユーザーとログインしていないユーザーに許可するページを簡単に管理できます。

ルートガードの実装

@angular/router パッケージから利用可能な CanActivate インターフェースを実装することでルートガードを追加し、ルートへのアクセスを許可または拒否するロジックを保持する canActivate() メソッドを拡張します。

たとえば、次のガードは userLoggedIn の値をチェックし、それに応じてルートへのアクセスを許可します。（ コードについては心配しないでください-すべてを詳細に理解します。 ）

class AuthGuardService implements CanActivate {
  userLoggedIn = false;canActivate() {
    if (this.userLoggedIn) {
     return true;
    } else {
     return false;
    }
  }
}

canActivate 属性を使用して、ガードでルートを保護できるようになりました。

const routes: Routes = [
  {
    path: 'user/:id', 
    component: UserDetailComponent,
    canActivate:[AuthGuardService] 
  }
];

上記のコードは、「 Angular コンポーネントのルーティング」に関するものです。ここをクリック👆して、 Angular-Routing の詳細をご覧ください。

「ルートガード」をアプリの認証領域、またはアクセスするために特別な権限を必要とする管理セクションに適用できます。次のコードサンプルでは、ルートガードの非常に単純な実装を確認します。

ガードを作成する

最初にサービスを作成しますが、Guardを作成するには、 canActivate を実装する必要があります。ターミナル/コマンドプロンプトで次のコマンドを実行して AuthGuardService を作成しましょう。

$ ng g s service/AuthGuard

このコマンドは2つの TypeScript ファイルを生成します—以下をご覧ください👇

f:id:ic_lifewood:20200103220914p:plain

#1 AuthGuardServiceを作成する

次に、src/app/service/auth-guard.service.ts ファイルを開き、次のように更新します（このコードで AuthService をインポートして使用しました👇👇 AuthService の詳細についてはここをクリックしてください👆）

gist.github.com

#2 AuthGuardServiceを登録する

これで、この AuthGuardService を Angular ルート定義に登録できます。 src/app/app-routing.module.ts ファイルを開き、次のように更新します：（「 path 」と「 component 」の値を適宜変更してください）

gist.github.com

注：クライアント側ではセキュリティは意味がありません。むしろ、ルートガード（またはその他のメカニズム）を使用するのは、ユーザーが入ることが許可されていないエリアに入らないようにするため、すべてUX機能です。ただし、最終的なセキュリティチェックは常にサーバー側で行う必要があります。

ブロックは不十分です。

true または false を返すだけでは、実際には十分ではありません。何が起こったのか、なぜ彼らがページに入ることを許可されなかったのかをユーザーに伝える必要があります。通知を表示するか、ほとんどの場合、他のページビューにリダイレクトします。

これを行うには、ルーターを AuthGuard に挿入し、他のページビューにリダイレクトします。 こちらをご覧ください：👇👇

#3 AuthGuardService の変更

gist.github.com

（「 Observable タイプ」と「 Angular でサブスクリプションを管理する」の詳細-ここをクリック👆）

このガードをルートにアタッチすると、 canActivate() メソッドは、ルートがアクティブになる前、つまり実際の パス を開く前、または実際の コンポーネント をロードする前に起動します。

const routes: Routes = [
  {
    path: 'user/:id', 
    component: UserDetailComponent,
    canActivate:[AuthGuardService] 
  }
];

ロジックはまずユーザーが有効かどうかを確認し、有効でない場合はログインルートに移動します。
また、現在のURLを取得し、クエリパラメーターとして設定するため、/login?return=%2Fusers%2Fabc123 のようになります（URLはエンコードされます）。これは、 /users/abc123 のようにユーザーにアクセスしようとしている場合で、 canActivate が不正ユーザーを検出します。

まとめ

1) AuthGuardServiceを作成する 2) AuthGuardServiceを登録する 3) AuthGuardService の変更

できた🤩！ routeルートガードを使用してページを保護するのは簡単です。またね👋👋

コメントボックスにコメントしてください。何かを見逃した場合や何かが間違っている場合、または何かが機能しない場合は:)

より多くの記事のために接続を維持： https://medium.com/@AnkitMaheshwariIn

助かったので拍手👏 👏 してもかまいませんが、他の人が記事を見つけられるように助けてください。

f:id:ic_lifewood:20200103224145g:plain