Giter VIP home page Giter VIP logo

Comments (4)

xusenlin avatar xusenlin commented on August 26, 2024 1

这部分确实不太会做,希望能够得到您的答复!

您好,这个得根据后端设计得权限系统来考虑。一般来说,我们系统会有很多角色,不同的角色拥有不同的权限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.

Hanson avatar Hanson commented on August 26, 2024 1

刚好楼主问了我想问的问题,我也看懂了作者的思路了,这里另外问一个相似的

这其中也可以配合动态添加路由来做

这个动态路由应该如何做呢?如果只是单纯控制菜单的话,有 path 也是可以进行访问的

from vue-element-ui-admin.

roobtyan avatar roobtyan commented on August 26, 2024

非常感谢您的回复,我大致明白怎么做了,谢谢您!

from vue-element-ui-admin.

xusenlin avatar xusenlin commented on August 26, 2024

刚好楼主问了我想问的问题,我也看懂了作者的思路了,这里另外问一个相似的

这其中也可以配合动态添加路由来做

这个动态路由应该如何做呢?如果只是单纯控制菜单的话,有 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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.