Currently, I am working on implementing a permission check for users before they can access a specific route. I have experimented with using both route.beforeEach and route.beforeResolve. Everything functions as expected if the localStorage within the tab has been loaded; however, when attempting to access the route in a new tab, it results in a 404 error indicating that the user does not have permission. The current workflow is as follows:
Current Situation:
- Open a new tab in the browser
- Enter http://url/route in the address bar
- 404 error is displayed
- Navigate to the route page using a button
- Successfully reach the route page
Expected Behavior:
- Open a new tab in the browser
- Enter http://url/route in the address bar
- Successfully navigate to the route page if the user has permission
Below is the code snippet involved:
router.beforeEach((to: any, from: any, next: any) => {
let permission: any = localStorage.getItem(`${process.env.NODE_ENV}_user_role_permission`);
permission = permission ? JSON.parse(permission) : [];
console.log(permission);
if (!(to.meta.permission === permission)) {
next("/not-found");
return;
}
next();
});
The issue arises when trying to access the page in a new tab, resulting in null being logged by console.log(permission). However, when accessing it from the 404 page, navigation is successful. Could it be possible that the router executes before the localStorage is initialized?