路由上的Vue JS权限
路由上的Vue JS权限
提问于 2018-12-19 04:35:59
我有一个这样的路由：
{ path: '/testpage', component: Testpage},我使用它来限制基于用户角色的路由，如下所示：
let roles = {"exdir":"/testpage/"};
if (loggedIn){
// return next('/affiliatepage')
return next(roles[user.user.role]);
}现在，我正在尝试这样做，以便具有正确角色的用户可以访问该路由以及所有子路由。例如，如果我添加：
/testpage/subpage以我的方式这是可能的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-19 06:32:11
我使用导航卫士的方式是使用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' })
}
}
}
]
})以下是设置路由器名称并允许应用程序继续/chat的示例方法
methods: {
enterSomething() {
if(this.blah) {
this.$router.push({ name: 'Something', params: { name: this.blah } })
} else {
// Handle else condition logic
}
}
}希望这能帮助您设置路由守卫:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53840663
复制相关文章
相似问题