作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一条这样的路线:
{ path: '/testpage', component: Testpage},
我正在使用它来限制基于这样的用户 Angular 色的路由:
let roles = {"exdir":"/testpage/"};
if (loggedIn){
// return next('/affiliatepage')
return next(roles[user.user.role]);
}
现在,我正在努力使具有正确 Angular 色的用户可以访问该路由以及所有子路由。例如,如果我添加:
/testpage/subpage
以我的方式,这甚至可能吗?
最佳答案
我使用 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
}
}
}
希望这可以帮助您设置路由守卫:)
关于javascript - Vue JS 对路由的权限,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53840663/
我是一名优秀的程序员,十分优秀!