web-dev-qa-db-ja.com

vue-router beforeRouteEnterフック内の別のURLにリダイレクトする方法

Vue.js 2で管理者ページを作成していますが、認証されていないユーザーが/adminルートにアクセスして/loginにリダイレクトすることを防ぎたいです。そのために、管理コンポーネントで次のようにIn-Component Guard beforeRouteEnterを使用しました

...
beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    this.$router.Push('/login');
  }
}

ここでの問題は、thisがbeforeRouteEnterフックで定義されていないことです。この場合、$routerにアクセスして別のURLにリダイレクトする適切な方法は何ですか？

javascriptvue.jsvuejs2vue-router
12
Abdelaziz Mokhnache

ドキュメント は次のように述べています：

beforeRouteEnterガードは、ナビゲーションが確認される前に呼び出されるため、thisにアクセスできません。したがって、新しい入力コンポーネントはまだ作成されていません。

次のようにnextを呼び出すことで、別のページにリダイレクトできます。

beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    next('/login');
  }
}

同じ結果を得る別の方法を次に示します。したがって、各保護ルートでbeforeRouteEnterを使用する代わりに、metaプロパティを使用してルーター構成で保護ルートを定義し、beforeEachすべてのルートをフックし、保護されたルートを確認し、必要に応じてログインページにリダイレクトします。

let router = new Router({    
  mode: 'history',    
  routes: [    
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        auth: true // A protected route
      },
    },    
    {
      path: '/login',
      name: 'Login',
      component: Login, // Unprotected route
    },
  ]
})

/* Use this hook on all the routes that need to be protected 
instead of beforeRouteEnter on each one explicitly */

router.beforeEach((to, from, next) => {    
  if (to.meta.auth && userNotLoggedIn) {
    next('/login')
  }    
  else {
    next()
  }    
})

// Your Vue instance
new Vue({
  el: '#app',
  router,
  // ...
})
17
Ikbel