javascript - Vue JS 对路由的权限

Question

我有一条这样的路线:

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

我正在使用它来限制基于这样的用户 Angular 色的路由:

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

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

现在，我正在努力使具有正确 Angular 色的用户可以访问该路由以及所有子路由。例如，如果我添加:

/testpage/subpage

以我的方式，这甚至可能吗？

Answer 1

我使用 Navigation Guards 的方式是使用 beforeEnter。 可以找到关于 beforeEnter 的一些文档 here 我在下面提供了一个例子。 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
    }
  }
}

希望这可以帮助您设置路由守卫:)