Vueでコンポーネントの読み込みとリダイレクトを停止するにはどうすればよいですか？

Question

ログインしていないユーザーがアクセスしないコンポーネントがあります。このロジックをbeforeCreateフックに実装しました。問題は、これがコンポーネントのロードを中断してしまうことではありません。

これは私のコードです：私は間違っ

<script> 
    export default { 
     beforeCreate: function() { 
      if (this.$root.auth.user === null) { 
       this.$router.push({ name: 'auth.login' }) 
      } 
     }, 

     mounted: function() { 
      // some code that SHOULD NOT be processed 
      // if the user isn't authenticated 
     } 
    } 
</script> 

何をしているのですか？

Answer 1

beforeCreate関数をルータ自体に移動する必要があります。 はここでそれは私がauthおよびゲストの配置を処理するために、私のルート定義を使用することができます私のAuthキャッチ

router.beforeEach(
    (to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
     // if route requires auth and user isn't authenticated 
     if (!store.state.Authentication.authenticated) { 
     let query = to.fullPath.match(/^\/$/) ? {} : { redirect: to.fullPath } 
     next(
      { 
      path: '/login', 
      query: query 
      } 
     ) 
     return 
     } 
    } 
    next() 
    } 
) 

です。

{ 
    path: '/', 
    component: load('Template'), 
    children: [ 
    { path: '', component: load('Dashboard'), name: 'Dashboard' } 
    ], 
    meta: { requiresAuth: true } 
}, 
{ 
    path: '/login', 
    component: load('Authentication/Login'), 
    name: 'login' 
}, 

コンポーネントをVueで初期化する前にルータで呼び出すと、コンポーネントレベルのイベントの処理が停止します。