I’m trying to implement a quick solution for a route based authorization I need for my app and I have managed to setup Global Guards on my router that work fine when navigating using links on the app. The problem arises when I try to manually refresh the page or simply type in the URL in the browser address bar.
I have set up my router as follows:
import {Tracker} from "meteor/tracker";
import {Meteor} from "meteor/meteor";
import Authorization from '/imports/lib/Authorization';
// Import the router factory
import {RouterFactory, nativeScrollBehavior} from 'meteor/akryum:vue-router2'
// Create router instance
const routerFactory = new RouterFactory({
mode: 'history',
scrollBehavior: nativeScrollBehavior,
});
import Dashboard from '/imports/ui/dashboard/Dashboard';
import Visits from '/imports/ui/visits/Visits.vue';
// More Components
RouterFactory.configure(factory => {
factory.addRoutes(
[
{
path: '/',
name: 'dashboard',
component: Dashboard,
},
{
path: '/visits',
name: 'visits',
component: Visits
},
// More Routes
]
);
});
const router = routerFactory.create();
// A simple class holding my permissions
const auth = new Authorization();
Tracker.autorun(() => {
router.beforeEach((to, from, next) => {
if(to.name == 'not-authorized'){
console.log("Not-Authorized");
next();
} else if (!Meteor.userId() && to.name != 'sign-in') {
console.log("Redirect to Sign In");
next('/sign-in');
} else if (Meteor.userId() && to.name == 'sign-in') {
console.log("Signed In so to Dashboard");
next('/');
} else if (Meteor.user()){
console.log("Result: " + auth.canAccessPath(Meteor.user().profile.roleName, to.name));
console.log("Path: " + to.name);
if(auth.canAccessPath(Meteor.user().profile.roleName, to.name)){
console.log("Is Authorized");
next();
} else {
console.log("Is logged in but not Authorized");
next('/not-authorized');
}
}
next();
});
});
export default router;
Could the issue be with Tracker.autorun()
? Whatever the case is, how can I make this work on manual page refresh?