セキュリティで保護されたページとセキュリティで保護されていないページのレイアウトを分離する方法

Question

公開とセキュリティでレイアウトを分ける方法を理解しようとしています。

ルートを設定するときに子供の周りに概念がありますが、これが制定されている例は見つかりません。私が達成したいものを基本的に

：

公開（非セキュア）

• -Login
• -Registration
• -changeパスワード

はMDせずにレイアウトを持っています-toolbarおよびmd-sidenav

セキュア

• ダッシュボード
• プロフィール
• AddItemメソッド

ログイン後にのみアクセス可能とMD-ツールバーとMD-sidenavとレイアウトを持っている

誰でも作業例を持っている場合プランナーやそれに類するものが大いに評価されるでしょう。

Answer 1

ルーティングとコンポーネントの設定を適切に使用してこれを実行できます。

AppComponent - no layout goes here 
    children: 
    path: '', PublicRootComponent - Add your layout for your public component to this guy. 
             He has an embedded router-outlet to put the nested content 
             into the correct position 
     children: <- these children will use public's layout 
     path: 'login', LoginComponent  
     path: 'registration', RegistrationComponent 

    path: 'secure', SecureRootComponent - add your layout for your secured components 
             - again, this has a router-layout 
              to put nested content in correct position 
     children: <- these children will use secure's layout 

      path: 'dashboard', DashBoardComponent 
      path: 'profile', ProfileComponent 

私の例では、セキュリティで保護されたコンポーネントは「安全な/ダッシュボード」と「安全な/プロファイル」を介してアクセスされることに注意してください。

あなたはあなたのURLが仕事をしたいかに応じて、状況を変えることができますが、コンセプトは同じ

EDITまま：

いくつかの例を追加するには、

index.htmlを

app-component.html

アプリのコンポーネントが任意のレイアウトを追加しないことを

お知らせ

あなたは、あなたの公開ページのためのあなたのレイアウトを作成し、whereeverあなたルーター・コンセントタグをつけ

<h1>I am public root</h1> 
<div class="public-root-styling"> 
    <router-outlet></router-outlet> 
</div> 

PublicRootComponentネストされたコンテンツをその全体的なレイアウトに入れたい。同じ

SecureRootComponent

<md-sidenav-container> 
    <md-toolbar> I am secured content layout</md-toolbar> 
    <router-outlet></router-outlet> 
</md-sidenav-container> 

は、安全なルートに適用されます - そのコンポーネント自体の中にあなたのレイアウトを作成し、あなたの安全なコンポーネントは、コンテンツを注入する場所をマークするために、ルータの出口タグを使用します。

それは意味がありますか？

Answer 2

CanActivateを実装するAutoGuardを使用できます。あなたの書き込み

path: 'some-path', 
component: YOUR_SECURE_COMPONENT , 
canActivate : [AutoGuard]