VueJs Address Bar

Question

Hi friends,

The company I work for has a website with an Admin Dashboard. Pages that users can use according to their authorization are listed in the menu. Beautiful so far. However, there is a problem. The person can reach the pages that he cannot see in the menu at the moment, without authorization, from the address bar, by entering the link of the page. How can I prevent access to unauthorized pages from the Address Bar by redirecting them from one place? I don't want to check each page individually. This doesn't make sense. For example, a component with the message "You are not authorized to view this page" may be displayed or automatically redirected to the home page.

I'm waiting for your help. Thanks.

Answer 1

You will need to use a global router navigation guard/hook called beforeEach - as explained in multiple tutorials:

1. https://css-tricks.com/protecting-vue-routes-with-navigation-guards/
2. https://www.permify.co/post/implementing-role-based-access-control-in-vue-js