Emitting Vue.js events in Typescript

Understanding the Issue

Let’s assume (based on my private code) that:

• There is an UserController.ts class (on front), which then has a method invalidateTokenAndRedirectUser.
• VueRouterGuard.ts class which handles the onRouteChange logic, and this is where the invalidation happens.

Now the user won’t do anything for like 1 hour and eventually, the token will be invalidated. The VueRouterGuard checks in place (before going to the next route) if the token has expired.

If the user gets invalidated, I suggest:

• Move user to login page.
• Hide the logout menu element.  This is the problem, as the nav is controlled by Vue.js and DOM should NOT be manipulated directly for that purpose.

With this solution where VueRouterGuard invalidates the user, none of the Vue.js components/Views ever receives information that something happened.

Emitting Event From Typescript

By checking the source code of Vue.js to better understand how the events emitting works, I’ve found this:

And this looks just like the standard Event from Js.

So I’ve personally come up with this solution:

/** 
 * @description this service handles dispatching events,
 *              can also be used to dispatch events from within TS onto the VUE elements
 *              (this is not recommended for small components etc but can work just fine when used on router-view)
 */
export default class EventDispatcherService
{

    static readonly EVENT_NAME_USER_INVALIDATED = "user-invalidated";

    private static readonly ROUTER_VIEW_DOM_ID = "routerView"

    /**
     * @description will dispatch the event directly on vue `router-view`
     */
    public static emitEventOnRouterView(eventName: string): void
    {
        let event                = new Event(eventName);
        let routerViewDomElement = document.getElementById(this.ROUTER_VIEW_DOM_ID);
        if(null === routerViewDomElement){
            let message = "Vue `router-view` was not found in DOM for id: " + this.ROUTER_VIEW_DOM_ID;
            Logger.error(message);
            throw new BaseError(message);
        }

        routerViewDomElement.dispatchEvent(event);
    }

}

The emitEventOnRouterView method will take a RouterView DOM element and emit an event on it. And with that, the provided event can be listened to just like standard $emit('name').

<template>
  <router-view
      id="routerView"
      @login-success="handleLoginSuccess()"
      @user-invalidated="handleUserInvalidated()"
  />
</template>