Vue3 權限路由

news/2024/10/30 13:37:24/

最近接觸到關於role 能夠查看相關頁面的功能

最初的作法是全部的路由使用動態加載,考慮到 跟權限有關係 ,就有可能各種頁面都需要調用,因此這裡的role狀態會儲存在全局狀態管理中(pinia)

1.首先區隔出需要權限才能瀏覽的頁面,命名為dynamicRoutes

// 要有權限才能access的路由
export const dynamicRoutes = [{name: 'NotificationManagement',path: 'notification',component: () => import('pages/NotificationManagement'),},{name: 'MemberManagement',path: 'member',component: () => import('pages/MemberManagement'),},
]

在首次加載時先判斷動態路由,如果為superuser則加入動態的路由 

新版本router.addRoutes已废弃:使用 router.addRoute() 代替。
官方的解释是 router.addRoute 接受的是一个路由规则,也就是一个对象,或者接受一个字符串和一个对象。

function addRoutes(router, userStore) {if ((userStore.user.role || '').toLowerCase() === 'superuser') {dynamicRoutes.forEach(function (route) {router.addRoute('main', route)})}
}
// 一載入時先調用
addRoutes(router)

然而以上的方法,顯而易見的是如果使用者的role在途中變換的話就無法去同時更新動態路由,因此第二個方法延伸~

使用RouterBefore

在路由的meta中添加哪個角色有閱覽的權利

// router.js
{     name: 'Member',path: 'member',meta: {auth: true,role: ['manager'],},component: () => import('pages/Member'),
}

每次跳轉路由時,都會去獲取全局的角色狀態,這裡就可以避免如果使用者中途變換角色的問題,因為每次跳轉時都會去獲取該用戶的角色,與此同時獲取將要跳轉頁面的資訊(meta: {role})

router.beforeEach((to, from, next) => {const roles = to.meta.roleconst userRole = (userStore.user.role || '').toLowerCase()if (roles && !roles.includes(userRole)) {next('/404')return}next()
})

以上就是路由權限的功能~


http://www.ppmy.cn/news/78490.html

相关文章

性能优化常用的技巧,你都知道吗?

在实际工作中,提升MySQL数据库的查询性能是非常重要的。除了基本的索引和查询优化技巧外,还有一些更深层次的优化方案可以进一步优化性能。 1. 数据库表设计优化 选择字段类型: 根据数据类型和范围,选择适当的字段类型。例如&am…

SFM过程(一)

以图像为基础的三维重建过程SFM基本如下图所示&#xff1a; 以SfM-Toy-Library代码为例&#xff0c;如下&#xff1a; ErrorCode SfM::runSfM() {if (mImages.size() < 0) {cerr << "No images to work on." << endl;return ErrorCode::ERROR;}//in…

基于低代码平台的多租户解决方案

在云计算时代&#xff0c;“多租户”是一个非常重要的概念。根据百度百科中的定义&#xff0c;多租户技术是一种软件架构技术&#xff0c;简单来说是指以单一系统架构与服务提供多数客户端相同甚至可定制化的服务&#xff0c;并且仍然可以保障客户的数据在多租户环境中&#xf…

C Primer Plus第三章编程练习答案

学完C语言之后&#xff0c;我就去阅读《C Primer Plus》这本经典的C语言书籍&#xff0c;对每一章的编程练习题都做了相关的解答&#xff0c;仅仅代表着我个人的解答思路&#xff0c;如有错误&#xff0c;请各位大佬帮忙点出&#xff01; 1.通过试验&#xff08;即编写带有此类…

旧照片怎么修复成新照片?分享三种简单好用的修复方法

旧照片是我们珍贵的回忆&#xff0c;但是随着时间的推移&#xff0c;它们可能会因为自然衰老或者其他原因而变得模糊或者损坏。修复旧照片可以让我们重新体验美好的回忆&#xff0c;保留珍贵的记忆。随着技术的进步&#xff0c;现在可以通过数字化技术将旧照片修复成数字照片&a…

2023年天猫618跨店满减活动时间和天猫618预售活动时间介绍

2023年天猫618跨店满减活动时间和天猫618预售活动时间介绍 2023年618天猫跨店满减和去年一样&#xff0c;也是跨店每满300减50&#xff0c;优惠力度非常大。那么&#xff0c;今年618天猫跨店满减的活动时间是什么?下面小编就给大家介绍下&#xff0c;赶紧一起来看看吧。 202…

如何在nodejs中调用C# dll

Edge.js GitHub NPM package 环境要求 1.支持Node.Js 14.x, 16.x, 18.x, 19.x 2.支持 .NET Core 1.0.1 - 6.x - Windows/Linux/macOS nodejs中调用C# dll 下载并安装 .NET 6.0 SDK npm install edge-jsC#中的代码&#xff1a; 注意事项&#xff1a; 方法必须用async异步…

Windows编程开发中的语句覆盖、条件覆盖、判定覆盖、条件-判定覆盖、组合覆盖、路径覆盖

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天总结一下Windows编程开发中的语句覆盖、条件覆盖、判定覆盖、条件-判定覆盖、组合覆盖、路径覆盖。 首先你要明白一点&#xff1a; 逻辑覆盖率&#xff1a;语句覆盖<条件覆盖<判定覆盖<条件-判…