[英]Vue JS permissions on routes
I have a route that is like this: 我有一条这样的路线:
{ path: '/testpage', component: Testpage},
I am using this to limit the route based on a user role like this: 我正在使用它来限制基于这样的用户角色的路由:
let roles = {"exdir":"/testpage/"};
if (loggedIn){
// return next('/affiliatepage')
return next(roles[user.user.role]);
}
Now, I am trying to make it so that the user with the correct role can access that route plus all subroutes. 现在,我正在尝试使其具有正确角色的用户可以访问该路由以及所有子路由。 For example, if I added:
例如,如果我添加了:
/testpage/subpage
Is that even possible with the way I have it? 用我的方式有可能吗?
The way I use Navigation Guards is with beforeEnter. 我使用Navigation Guards的方式是使用beforeEnter。 Some documentation on beforeEnter can be found here I have provided an example below.
在beforeEnter一些文件可以发现这里我提供了下面的例子。 The if condition will check if the user has a name, you could check for a permission level.
如果条件将检查用户是否有名称,则可以检查权限级别。 If the condition is true, proceed to /chat.
如果条件为真,请继续/ chat。 Otherwise it will redirect you back to welcome.
否则,它将重定向您回到欢迎页面。
// 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' })
}
}
}
]
})
Below is an example method which will set the name for the router and allow the app to continue to /chat 下面是一个示例方法,该方法将设置路由器的名称并允许应用继续进行/ 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
}
}
}
Hopefully this helps you set up route guards :) 希望这可以帮助您设置路线警卫:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.