Vue router hide and show menu

@BeginnerSoul Well what are you struggling with? Vue Router? Because if you don’t know how to do this with a “traditional” application then I’d say you shouldn’t be trying to do it inside Vue either otherwise you’re just biting off way more than you can chew and making the task more complicated than it has to be.

@martinbean I know the beginner level how to use router, just didn't know how to hide menus if the person didn't login.

you need to save the authentication status of a user, let's say, in localStorage and use it for showing/hiding the menu and to protect routes.

@xdimension …and if someone starts tinkering with localStorage then they’ll again see the menus and routes they shouldn’t.

One of the reasons I hate SPAs. Authentication and authorisation is a server-side concern, and just pushing everything to the client is not a great idea.

EDIT: Your application’s security is going to be weakened if you follow the advice in the answer you accepted, @beginnersoul.

@martinbean That's just the status or the flag, everything else are handled by Laravel Sanctum securely, like users definitely won't be able to access any API endpoint if they're not authenticated.

@xdimension Of course you’d check authorisation (again) on the server-side, but still pushing those initial checks to the client is still a bad idea.

To me, a user shouldn’t be able to see permissions, feature flags, etc if they shouldn’t be able to. I don’t care if it’s validated on the back-end; it’s still exposing things to the client that I don’t really want exposing.

Whereas a server-rendered view; the user only sees what the server says they should see. A user can’t see what permissions they don’t have, what feature flags are disabled for them, etc.

@martinbean So, what would you propose? avoid implementing SPA at all?

@martinbean Do you mean that show / hide items of a menu should be decided by the backend ? In this case using VueJS and Laravel, using a package like InertiaJS with server-side rendering would be a better idea ?

I understand what you mean by saying that everyone should avoid exposing any information to the user (for example the permissions) in the frontend.

If the best pratice is to avoid using any flag in the frontend, perhaps it's better to call the API each time it's needed to check if a user is authenticated or not. So there is no flag set in the browser. Or is there another more secure pratice ?

Thanks for some more advice ;).