路線上的Vue JS權限

Question

我有一條這樣的路線：

{ path: '/testpage', component: Testpage},

我正在使用它來限制基於這樣的用戶角色的路由：

let roles = {"exdir":"/testpage/"};

if (loggedIn){
    // return next('/affiliatepage')
    return next(roles[user.user.role]);
}

現在，我正在嘗試使其具有正確角色的用戶可以訪問該路由以及所有子路由。 例如，如果我添加了：

/testpage/subpage

用我的方式有可能嗎？

Answer 1

我使用Navigation Guards的方式是使用beforeEnter。 在beforeEnter一些文件可以發現這里我提供了下面的例子。 如果條件將檢查用戶是否有名稱，則可以檢查權限級別。 如果條件為真，請繼續/ chat。 否則，它將重定向您回到歡迎頁面。

// Example of a Nav Guard
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/', // Home
      name: 'Welcome',
      component: Welcome
    },
    {
      path: '/chat',
      name: 'Chat',
      component: Chat,
      props: true,
      //Route Guard
      beforeEnter: (to, from, next)=>{
        // Is the user name not null
        if(to.params.name){
          next() // Take you to /chat
        } else{
            // If params.name is blank or in your case, does not have permission, redirect back to the welcome page
          next({name: 'Welcome' }) 
        }
      }
    }
  ]
})

下面是一個示例方法，該方法將設置路由器的名稱並允許應用繼續進行/ chat

methods: {
  enterChat(){
    if(this.name){
      this.$router.push({name: 'Chat', params: {name: this.name}})
    } else{
      // They have not entered a name, so display a message telling them
    }
  }
}

希望這可以幫助您設置路線警衛:)