使用vue怎么根据登陆人的权限配置动态路由?
时间: 2023-02-08 07:00:41 浏览: 72
使用 vue 怎么根据登陆人的权限配置动态路由呢?
你可以在 vue 的路由配置中使用 beforeEach 导航守卫,在进入路由之前进行权限判断。
具体步骤如下:
1. 在登录成功后将用户的权限信息存储在本地或 vuex 中,以便在之后使用。
2. 在路由配置中使用 beforeEach 导航守卫,在进入路由之前进行权限判断。
```
router.beforeEach((to, from, next) => {
// 获取用户权限信息
const permissions = store.state.permissions;
// 判断用户是否有权限进入该路由
if (hasPermission(permissions, to)) {
next();
} else {
// 用户没有权限,可以跳转到401页面或者跳转到登录页面
next({ path: '/401' });
}
});
```
3. 实现 hasPermission 函数,用于判断用户是否有权限进入该路由。
```
function hasPermission(permissions, route) {
// 如果该路由没有配置权限,则直接返回true
if (!route.meta || !route.meta.permission) {
return true;
}
// 判断用户是否有权限进入该路由
return permissions.includes(route.meta.permission);
}
```
4. 在路由配置中为需要权限的路由添加 meta.permission 字段。
```
const routes = [
{
path: '/admin',
component: Admin,
meta: {
permission: 'admin'
}
}
]
```
这样,就
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)