I am quite new to Vue and currently setting up an app that uses firebase authentication and firestore for basic RBAC.
To prevent unauthorized users from entering routes my router has a custom AuthGuard inspecting the local users roles (The backend implements similar rules)

```
export default new Router({
  routes: [
    {
      path: '/users',
      name: 'Users',
      component: Users,
      beforeEnter: AuthGuard(user => user.uid && user.roles.admin)
    }
..
]})

```

One issue I have with this setup is that sending people links to protected pages does not work. The auth guard prevents them from loading the page because the local `user` is not set initialized when the Vue app initializes.

So I came up with a *way* to delay the creation of my Vue App by structuring my `main.js` something along:

```
import Vue from 'vue'
...
init()
.then(() => new Vue(..)

```

During the `init` function I am waiting for `firebase.auth().onAuthStateChanged` to fire and tell me if the user has a valid token or not. It *does* work but it does not feel right.

Is it ok to asynchronously create a new Vue App? Are there better methods like lazy loading the authentication guard on the route or something?