Angular をフロント エンドとして、Java(Spring-Boot) をバックエンドとして使用して、単一ページの Web システムを構築しています。このシステムにはさまざまな役割があり、ユーザーは 1 つの役割に割り当てる必要があります。役割が異なれば、実行できる操作も異なります。
簡単に言うと、システムにはスーパーユーザーと管理者の 2 つの役割があります。このシステムの唯一の機能は、name、retail_price、factory_price の 3 つのプロパティを持つ Product です。スーパー ユーザーは、製品を追加し、これらのプロパティを更新できます。管理者は name と Retail_price を表示できますが、factory_price を表示することはできません。管理者は、retail_price を更新することもできますが、製品を追加することはできません。
この機能制御を Angular で実装するために、現在、HTML でコードをハードコーディングしています。製品ページを表示すると、ログインユーザーがスーパーユーザーに属している場合、追加ボタンが表示されます。製品詳細ページを表示すると、ログイン ユーザーが管理者に属している場合、factory_price は非表示になり、名前フィールドは読み取り専用になります。
明らかに、これらの制御コードはすべて HTML にあり、誰もがそれを読んでロジックを知ることができるため、これは良い方法ではありません。サーバー側でこのロジックを処理できるソリューションとガイダンスを探しています。サーバーは、ブラウザーが表示する必要があるものを返すだけで、フロントエンド (Angular) はサーバーからのコンテンツを表示し、上記のようにこれらすべての制御ロジックを取り除きます。
別の課題は、役割ごとに異なる HTML をどのように処理するかです。たとえば、製品の詳細ページの場合、サーバー側でさまざまな役割の HTML コンテンツを準備し、ログイン ユーザーが製品の詳細ページに移動したら、Restful 呼び出しを送信し、バックエンドから HTML コンテンツを取得して表示します。次に、クライアント側にロジックを含める必要はなく、表示するだけです。役割ごとに異なる HTML テンプレートを使用する必要がありますか?