ability update is working only after Refreshing the page in VueJS

I used ability in router (vue-router) like this in router/index.js

{
	path: 'warehouses',
	name: 'Warehouses',
	component: Warehouse,
        meta: {
		hasPerm: ability.can('list', 'warehouse-balances')
		}
},

and updating ability when loginSuccess mutation is executed in store/ability.js

export const ability = new Ability()

export const abilityPlugin = (store) => {
	ability.update(store.state.rules);
	return store.subscribe((mutation) => {
		switch (mutation.type) {
			case 'loginSuccess':
				let formattedRules = [];
				if(mutation.payload.permissions.length > 0) {
					formattedRules = mutation.payload.permissions.map(perm => {
						let formattedObj = {};
						formattedObj.actions = perm.substr(0, perm.indexOf(' '));
						formattedObj.subject = perm.substr(perm.indexOf(' ')+1);
						return formattedObj;
					})
				}
				ability.update(formattedRules);
				break
			case 'logoutSuccess':
				ability.update([{ actions: 'read', subject: 'all' }])
				break
		}
	})
 } 

But ability is updating only when page is refreshed I am checking the route meta in beforeEach guard it is returning false but it should be true after login

router/index.js

router.beforeEach((to, from, next) => {
	const isPublic = to.matched.some(record => record.meta.public);

	// CHECK IF USER HAS PERMISSION FOR THIS URL
	const isOpen = ('hasPerm' in to.meta) ? !!to.meta.hasPerm : true;
	//ability.update(store.state.rules);

	const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
	const loggedIn = !!TokenService.getToken();
	if (!isPublic && !loggedIn) {
		return next({
			path: '/pages/login',
			query: {redirect: to.fullPath}
		})
	}

	if (!isOpen) {
		return next('/');
	}

	if (loggedIn && onlyWhenLoggedOut) {
		return next('/');
	}

	next();
});

I don’t know if it is a bug or I am doing something wrong. Any help would be appreciated ! This issue is also published in Forum vuejs here is the link Question about this issue

[stalniy]

This is the way things work 😃

If you do assignment to a variable it will never be changed until you change the variable. You just cached results of the ability, into object key. Vue router is initialized once and its routes are also initialized once and are not re-evaluated in beforeEach.

So, your example is the same as:

let isAllowed = false
const can = () => isAllowed

const route = {
  meta: {
    hasPerm: can()
  }
}

isAllowed = true

console.log(can(), route.meta.hasPerm)

[bakhti-uzb]

aah got it! Thanks