💻
Angularで同じルートでログインユーザーと非ログインユーザーにコンテンツを出し分ける
やりたかったこと
/ というURL（トップページ）で表示するコンテンツを、ログイン済みのユーザーと未ログインのユーザーで出し分けたかった。
ログイン済みならタイムラインが表示されるけど、
未ログインの場合はLPが表示される、
というよくある感じです。
やったこと
ルーティング設定
const routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
];
HomeComponent
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
template: `
<my-logged-in-home *ngIf="auth.isLoggedIn()"></my-logged-in-home>
<my-not-logged-in-home *ngIf="!auth.isLoggedIn()"></my-not-logged-in-home>
`,
})
export class HomeComponent {
isLoggedIn: boolean;
constructor(
public auth: AuthService,
) {}
}
こんな感じで、ルーティングは HomeComponent にしておいて、HomeComponent のテンプレートで LoggedInHomeComponent と NotLoggedInHomeComponent を出し分けるようにしました。
ルーティング設定自体で使うコンポーネントを切り替えるみたいなことができないかなーと考えたけど、ググった限りどうやらそんなことは出来なさそうで、試行錯誤の末にこうなりました。
もっとスマートな方法をご存知の方いらっしゃいましたらぜひ教えてください🙏
サンプル
動作サンプル置いときます。
https://stackblitz.com/edit/angular-same-route-different-contents-logged-in-or-not
Discussion