Vue-Router Programmatically Open Modal

Question

I have a login page that I will re-direct to if a user is not authenticated (via the meta tag auth), and conversely if a user is logged in, will get redirected to home if he/she tries to visit the login page (via the meta tag guest). The authenticated state is stored in Vuex:

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth) && 
    !store.state.auth.authenticated) {
  // If user is not authenticated, redirect to login page
    next({
      name: 'Login',
    })
  } else if (to.matched.some(m => m.meta.guest) && 
    store.state.auth.authenticated) {
  // If user is authenticated and on guest page, redirect to home
    next({
      name: 'Home',
    })
  } else {
    next()
  }
})

What I would like to do is make my login page a modal instead of a landing page. I've been able to make a login modal and have it appear when clicking on a button, but is there a way to have vue-router automatically display the modal if a user attempts to go to a link that requires authentication instead of going to a dedicated landing page?

d49tt0 d49tt0 · Accepted Answer · 2018-03-22T20:33:40

If i understood you right, u can call mutation in your state management(u use Vuex as i think) to open model dialog logIn form

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth) && 
    !store.state.auth.authenticated) {
  /* If user is not authenticated,
     make action/mutation to the store to open a dialog  
  */
    store.commit('openLogInDialog')
    next(false)
  } else next()
})

Vue-Router Programmatically Open Modal

1 Answers