vue3 不同的用户权限登录显示不同的路由
时间: 2023-08-15 16:11:12 浏览: 50
在 Vue 3 中,可以通过路由守卫来实现不同用户权限登录显示不同的路由。
首先,在路由配置文件中,为每个需要权限控制的路由添加 meta 属性,用于存储该路由需要的用户权限等信息。例如:
```
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAdmin: true }
},
{
path: '/user',
component: User,
meta: { requiresUser: true }
}
];
```
接着,可以通过全局前置守卫 beforeEach() 来检查用户是否有访问该路由的权限。例如:
```
router.beforeEach((to, from, next) => {
const currentUser = AuthService.getCurrentUser();
if (to.matched.some(record => record.meta.requiresAdmin)) {
if (currentUser.role === 'admin') {
next();
} else {
next('/login');
}
} else if (to.matched.some(record => record.meta.requiresUser)) {
if (currentUser.role === 'user') {
next();
} else {
next('/login');
}
} else {
next();
}
});
```
在上面的代码中,我们从 AuthService 中获取当前用户信息,并根据路由的 meta 属性判断用户是否有访问该路由的权限。如果没有权限,则重定向到登录页面。
需要注意的是,必须在每个需要权限控制的路由上添加 meta 属性,并在全局前置守卫中进行权限判断,才能实现不同用户权限登录显示不同的路由。