Comments (4)
这部分确实不太会做,希望能够得到您的答复!
您好,这个得根据后端设计得权限系统来考虑。一般来说,我们系统会有很多角色,不同的角色拥有不同的权限key(关键字),一个用户可能会拥有多个角色,角色其实是把很多权限打包之后给定一个名称(如,普通管理员)。对于前端来说,“普通管理员”是给用户看的,我们不用去关心角色,只关心登陆的用户拥有的多个角色的权限集合key。因此,在用户登陆的时候应该拿到当前用户所有的权限(一个数组)如
[home,deleteUser,addUser,...]
我们把他存在本地。
在utils文件夹里有v-permissions.js和dataStorage.js有一个hasPermissions函数都是用来判断权限的。
比如你说的在Menu/index下实现。我们先在同目录的menu.js里每个菜单添加一个属性PermissionsKey。像
articleManage.articleList = {
name: '文章列表',
permissionsKey:'viewArticle',
path: '/article/article_list',
};
添加好这些key之后,在Menu/index循环导入的菜单,配合hasPermissions函数来决定是否添加到导出的菜单里面。在页面上我们可以通过注册v-permissions指令去控制。
当然,这些可能因为后端权限的设计有所不同。不过思路都是一样的,权限key的约定是不可避免的,
这其中也可以配合动态添加路由来做。
from vue-element-ui-admin.
刚好楼主问了我想问的问题,我也看懂了作者的思路了,这里另外问一个相似的
这其中也可以配合动态添加路由来做
这个动态路由应该如何做呢?如果只是单纯控制菜单的话,有 path 也是可以进行访问的
from vue-element-ui-admin.
非常感谢您的回复,我大致明白怎么做了,谢谢您!
from vue-element-ui-admin.
刚好楼主问了我想问的问题,我也看懂了作者的思路了,这里另外问一个相似的
这其中也可以配合动态添加路由来做
这个动态路由应该如何做呢?如果只是单纯控制菜单的话,有 path 也是可以进行访问的
嗯嗯,将所有的路由定义好,但是只有登录页面和首页(必要的话)以及404页面 真正的添加到系统里,登陆成功之后根据权限Key动态(router.addRoutes)将需要的路由追加到系统里。具体可以查看官方api。
export const constantRouterMap = [
{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
{ path: '/404', component: () => import('@/views/404'), hidden: true },
{
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
children: [
{
path: 'dashboard',
meta: { title: '首页', icon: 'dashboard', noCache: true },
component: () => import('@/views/dashboard/index')
}
],
},
//{ path: '*', redirect: '/404', hidden: true }
]
//这部分路由是后面根据权限添加需要的路由到系统里
export const asyncRouterMap = [
InstitutionsManage,
StudentManage,
TrainingClass,
TestManage,
ResourceManage,
NotificationManage,
Settings,
HelpCenter
]
export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
from vue-element-ui-admin.
Related Issues (11)
- To install it, you can run: npm install --save @/views/Personal/Index.vue HOT 1
- API用法 HOT 3
- 测试呢 HOT 1
- 请问为何路由部分的懒加载没法使用? HOT 3
- self.$Api.departDelete中的self.$Api以及departDelete在哪里定义的? HOT 1
- 有没表格导出的功能啊
- 动态异步路由问题 HOT 1
- 有没有在线预览啊 HOT 1
- 能不能详细说下commonValidateRules.js怎么使用 HOT 2
- build打包文件过大 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-element-ui-admin.