vue-admin-element 登录菜单配置学习

  • 时间:
  • 来源:互联网

1、登录在src/views/login/index.vue ,登录只是账号密码,登录后获取用户信息其中包含用户角色,路由配置在src/router/index.js,路由中配置了每个路由对应的角色。可以通过修改配置的title修改菜单名称。

{
    path: '/pdf',
    component: Layout,
    redirect: '/pdf/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/pdf/index'),
        name: 'PDF',
        meta: { title: 'PDF', icon: 'pdf', roles: ['admin'] }
      }
    ]
  }

路由配置里有公共的路由constantRoutes和异步路由asyncRoutes,公共路由constantRoutes所有用户都加载,异步路由是根据在 meta里设置roles来实现动态的加载。

2、权限的判断 是在 src/store/modules/permission.js文件里,有个actions。判断如果角色里包含admin(一个用户可多个角色,所以返回的角色是个数组),就显示全部的

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

 

123hainiao
发布了28 篇原创文章 · 获赞 4 · 访问量 1万+
私信 关注

本文链接http://element-ui.cn/news/show-817.aspx