How to properly display header for logged in user?

Question

JavaScript

It is necessary that when the user is not authorized - some links are shown in the header, and when the user is authorized - others. I have a couple of options, but they are terrible in terms of scalability. I would like to know from knowledgeable people how to do it correctly from the point of view of the application architecture?

Answer 1

All links to an array of objects, those that are for an authorized user, mark with the flag auth:true
In the menu, when outputting, filter the array based on the user's authorization.
Or if different not only links and headers are very different, then make 2 components, one for an authorized user and the other for an authorized user.