Angular 哪种方式更适合我的登录表单在我的角材质sidenav之外

在我的应用程序中，我有material sidenav组件，所有其他组件都位于该sidenav内，如以下示例所示：

    <!-- this is inside my app.component.ts -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

问题是我希望我的登录表单组件位于sidenav之外，因此我提供了两种方法：

• 这是第一个：

• 这是第二个

在第二个示例中，我使用路由作为登录表单，并使用Guard作为其他组件
我的问题是：

最好的方法是什么

是否有更好的方法以安全的方式执行此操作

PS：这两种方法都很好

---

看一看角度防护装置，并实现一个保护某些路由的身份验证防护装置。这样，用户可以尝试导航到某条路线，然后你的警卫可以检查他们是否被允许，并通过重定向到安全页面或向他们发送未经授权的消息进行适当处理。关于安全的说明。您正在向客户端（用户）提供代码。这永远无法满足您的安全需求，因为他们可以更改代码并点击任何页面（如果他们真的想要）。真正的身份验证必须在服务器端进行验证。希望这能帮助Hanks james澄清我在第二种方法中使用guard的事实，这只是我们使用spring security framework的后端的前端

    <!-- also in my app.component.ts
     use variable loggedIn to see if the user is logged in or not -->

    <div *ngIf="!loggedIn" class="login-app">
        <app-authentication></app-authentication>
    </div>
    <!-- if the user loggedIN -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

    <div *ngIf="!loggedIn" class="login-app">
        <router-outlet></router-outlet>
    </div>
    <!-- if the user loggedIN -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>