Use route-level metadata and Vuex for route guards

[brylie]

We currently have the following route guards defined on the main Router instance:

wellbeing-client/src/router/index.js

Lines 30 to 51 in 0920728

	Router.beforeEach(async (to, from, next) => {
	if (to.path.startsWith("/resident/")) {
	next();
	return;
	}
	if (to.path === "/login" && !!getCookie("token")) {
	next("/");
	return;
	}
	if (to.path === "/login" && !getCookie("token")) {
	next();
	return;
	}
	const result = await checkIfLoggedIn();
	if (!result) {
	next("/login");
	return;
	}
	next();
	});

There seem to be three main guards:

• ensure logged in (on all routes)
• allow anonymous access (used on /resident)
• redirect if already logged in (on /login route)

The first condition in the route guards is to check what the current path is. Since routes are defined by path, the path check is somewhat redundant.

One conventional approach is to use the route meta field to define a property requiresAuth, as follows. Notice the use of a Vuex store for an authentication token.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isAuthenticated) {
      next()
      return
    }
    next('/login')
  } else {
    next()
  }
})

Refactor the route guards into re-usable functions and apply requresAuth meta attribute directly in the relevant route definitions.

Resources

• Route Meta Fields
• Authentication In Vue.js