Vue 라우터 입력 전 vs 각 입력 전

Vue 라우터 입력 전 vs 각 입력 전

로그인하지 않은 사용자를 모든 페이지에서 다음 페이지로 리디렉션하려고 합니다./login.나는 노력했다.beforeEach()그러나 사용자가 다음과 같은 direct url로 사이트에 들어가면 부팅되지 않습니다./home,/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();
  }
})

잘 부탁드립니다.

이렇게 생겼어요.beforeEach는 초기화된 컴포넌트 내에서 정의되고 있습니다.즉, 첫 번째 라우팅이 이미 이루어졌음을 의미합니다.대신 라우터 모듈에서 루트를 사용하여 정의합니다.

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

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

Vuex 를 사용하고 있어, 다음의 스토어를 Import 할 수 있는 것을 희망합니다.store.state.isloggedinVuex를 아직 사용하지 않은 경우 글로벌 상태에서 Vuex가 유용한 이유를 알 수 있습니다.

언급URL : https://stackoverflow.com/questions/65200775/vue-router-beforeenter-vs-beforeeach