Vue JS 路由权限设置

Question

我有一个路由，像这样：

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

我正在使用这个功能来根据用户角色限制路由，就像这样：

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

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

现在，我正在尝试让具有正确角色的用户可以访问该路由以及所有子路由。例如，如果我添加:

/testpage/subpage

按照我的方式，这是否可能实现？

- Carter

---

听起来你需要嵌套路由。请参阅 https://router.vuejs.org/guide/essentials/nested-routes.html - Phil

Answer 1

我使用导航守卫的方式是通过beforeEnter。 有关beforeEnter的一些文档可以在此处找到：这里 我提供了一个示例。if条件将检查用户是否具有名称，您可以检查权限级别。如果条件为真，则继续前往/something。否则，它将重定向回主页。

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

以下是一个示例方法，它将设置路由器的名称并允许应用程序继续到/something。

methods: {
  enterSomething() {
    if(this.blah) {
      this.$router.push({ name: 'Something', params: { name: this.blah } })
    } else {
      // Handle else condition logic
    }
  }
}

希望这有助于您设置路由守卫 :)

- Spangle