vue3项目 登录普通管理员只能看见前三个路由 注意只展示了部分路由 ,登录超级管理员可以看到全部的路由 通过router.begoreach 怎么写
时间: 2023-07-28 20:11:53 浏览: 54
假设你的路由配置如下:
```javascript
const routes = [
{
path: '/',
redirect: '/dashboard'
},
{
path: '/dashboard',
component: Dashboard,
meta: {
// meta 中定义需要的权限,1 表示普通管理员权限,2 表示超级管理员权限
permission: 1
}
},
{
path: '/users',
component: Users,
meta: {
permission: 1
}
},
{
path: '/roles',
component: Roles,
meta: {
permission: 1
}
},
{
path: '/settings',
component: Settings,
meta: {
permission: 2
}
},
{
path: '/system',
component: System,
meta: {
permission: 2
}
}
]
```
在路由配置中,我们使用 `meta` 属性来定义需要的权限,其中 `permission` 的值为 1 表示普通管理员权限,2 表示超级管理员权限。
接下来,在路由配置中添加一个全局前置守卫,在每次导航之前检查用户权限。
```javascript
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const permission = to.meta.permission
if (permission === 1) {
// 普通管理员只能看到前三个路由
const allowRoutes = ['/dashboard', '/users', '/roles']
if (allowRoutes.includes(to.path)) {
next()
} else {
next('/dashboard')
}
} else if (permission === 2) {
// 超级管理员可以看到全部路由
next()
} else {
// 没有定义权限的默认为超级管理员权限
next()
}
})
```
在全局前置守卫中,我们首先获取当前路由的权限,然后判断当前用户是否具有该权限。如果是普通管理员权限,只能看到前三个路由。如果超级管理员权限,则可以看到全部路由。如果没有定义权限,则默认为超级管理员权限。如果用户没有该权限,则跳转到默认的路由 `/dashboard`。
这样,就可以通过 `router.beforeEach` 实现路由权限控制。