javascript - Vue 路由器 beforeEnter 与 beforeEach

Question

我试图将未登录的用户从所有页面重定向到 /login .我试过 beforeEach()但是当用户使用像 /home 这样的直接 url 进入站点时它不会触发, /event .
每条路由保护 beforeEnter()工作完美，因为一旦用户登陆该特定页面，它就会触发。但是，它需要我添加 beforeEnter()在每条路线上。
我正在寻找一种方法来复制该 beforeEnter()几乎在路由器上的每个页面(甚至在动态页面上)，未登录的用户都会被重定向到 /login .
当用户使用直接 url /home 输入时，此方法有效.

routes: [
  {
    path: '/home',
    name: 'home',
    beforeEnter(to, from, next){
      if ( to.name !== 'login' && !this.isloggedin ){
         next({
           path: 'login',
           replace: true
         })
      } else {
         next()
      }
    }
  },
  ...
]

这个只有在用户进入站点和路由改变后才有效

vm.$router.beforeEach((to, from, next)=>{
  if ( to.name !== 'login' && !this.isloggedin ){
    next({
      path: 'login',
      replace: true
    })
  } else {
    next();
  }
})

提前致谢。

Answer 1

看起来像这样 beforeEach在初始化的组件中定义，这意味着第一个路由已经发生。在路由器模块中使用您的路由定义它:

const router = new VueRouter({
...
})

router.beforeEach((to, from, next)=>{
  if ( to.name !== 'login' && !this.isloggedin ){
    next({
      path: 'login',
      replace: true
    })
  } else {
    next();
  }
})

希望您正在使用 Vuex 并且可以为 store.state.isloggedin 导入商店.如果还没有使用 Vuex，这说明了为什么它对全局状态很有用。