Vue-router sets the problem of global login blocking.

< H2 > how does vue-router invoke a component in the navigation guard? < / H2 >

login blocking on the official website is to jump to a fixed page, such as

//  
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) { // 
    if (judgingLogon()) { // 
      next()
    } else { // 
      next({
        path: "/login",
        query: { back: to.query }
      })
    }
  } else {
    next()
  }
})

this allows you to jump to the corresponding login page when you need to log in, but now the login box pops up when you click on a navigation that needs to be logged in, and the login box component has been written. The question is: how to control the data of this login component in beforeEach? That is, a login box pops up on all the pages that need to be logged in, and the login box can be triggered when the user clicks the [login] button.


then you can control it with vuex. The login component is introduced into app.vue, and if there is layout, it is introduced into layout

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-34f8b5b-1d5a8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-34f8b5b-1d5a8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?