Asynchronous new Vue() to wait for initial authentication

Question

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?

tim · Accepted Answer · 2018-06-24 23:44:57Z

1

I do the same with Vue and Azure Active Directory authentication, seems to be the best way of doing it.

Please see Miguels answer: https://stackoverflow.com/a/45899653/2703700

Is that the answer you were looking for?

answered Jun 24, 2018 at 23:44

tim

3784 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anoff Over a year ago

Definitely helps knowing others do the same. Thanks Tim :)

Frenchcooc · Accepted Answer · 2021-08-31 16:47:03Z

1

I'm doing the same thing as well. Here's a snippet in case someone is interested in a more concrete example:

import Vue from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'

/**
 * Initialize Firebase
 */

firebase.initializeApp(FIREBASE_CONFIG)

/**
 * Initialize Vue.js
 */

let app;

firebase.auth().onAuthStateChanged(user => {
  if (!app) {
    app = new Vue({
      render: h => h(App)
    }).$mount('#dashboard')
  }
})

answered Aug 31, 2021 at 16:47

Frenchcooc

1,0908 silver badges21 bronze badges

Collectives™ on Stack Overflow

Asynchronous new Vue() to wait for initial authentication

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related