Question

我有一个登录页面，如果用户未经过身份验证（通过元标记身份验证），我将重新定向到该页面，相反，如果用户已登录，如果他/她尝试访问，则会重定向到主页登录页面（通过元标记来宾）。经过身份验证的状态存储在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()
  }
})

我想要做的是让我的登录页面成为模式而不是登录页面。我已经能够创建一个登录模式，并在单击按钮时显示它，但有没有办法让vue-router自动显示模式，如果用户试图转到需要身份验证的链接而不是去专用的登陆页面？

Answer 1

如果我理解你的话，你可以在状态管理中调用变异（你按照我的想法使用Vuex）打开模型对话框登录表单

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以编程方式打开模态

1 个答案: