vue-element-admin最佳实践

YaNing
5,283 阅读3分钟

简介

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了  i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

项目目录

├── build                      # 构建相关
├── mock                       # mock 数据
├── plop-templates             # 模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 主体代码
│   ├── api                    # xhr请求
│   ├── assets                 # 图片以及字体
│   ├── components             # 公共组件
│   ├── directive              # 自定义指令
│   ├── filters                # filter筛选
│   ├── icons                  # 全局的svg矢量图标组件
│   ├── lang                   # 国际化 i8n
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # vuex
│   ├── styles                 # style
│   ├── utils                  # 公共方法
│   ├── vendor                 # 第三方方法
│   ├── views                  # view页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限控制
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

引言

因为最近公司需要开发基于权限管理的后台系统，在github找到了vue-element-admin star 高达 62354 所以研究了一下

git地址

点这里

权限路由

1. router/index.js
2. permission.js
3. store/modules/permission.js

动态路由

获取用户权限 -> 根据用户权限获取可以访问路由 -> 通过addRoutes注入到路由表里

 第一步：路由声明

router/index 需要拆分路由，以往的做法是把所有的路由初始化的时候就注入到路由表内，现在初始化注入到的应该是不需要权限控制的路由，把需要权限控制的路由声明以及抛出。等用户登录后动态添加。

constantRoutes 基础路由

asyncRoutes 异步路由( 权限控制路由 )

permission.js 路由守卫

  1. 首先判断是否登录 getToken方法 如果没有登录跳转到登录页
  2. 如果登录过判断是否可以用户的roles（ roles代表用户权限 如果可以获取到代表用户以及登录 && 已经注入了动态路由 ）
  3. 具体讲解 已经登录且没有获取用户权限 和 没有注入动态路由的情况

这里会进行 store.dispatch('user/getInfo') 会拿登录的token 获取到此用户的权限 返回的是 用户的 roles 

接下来就是拿 roles 去匹配用户下面的可以访问的路由 permission/generateRoutes 匹配的对应关系为 router声明的 meta.roles 和用户的roles 对应

按钮权限

按钮权限使用 directive 自定义指令通过传参的方式实现

从store取到用户的权限roles，然后判断传入的数组 如果其中一项满足即可展示 否则 通过removeChild 删除此元素

动态面包屑

@components/Breadcrumb

通过watch $router 监控的方式获取到这个路由的层级展示 （ 需要注意下meta.breadcrumb为false的情况）

快捷导航标签页

1. layout/components/TagView/index.vue
2. store/modules/tagsView.js

在组件内主要通过 watch $router

  1. addTags 来添加 store里的 visitedViews 用来记录用户的提交记录

  2. addCachedView 这个是对路由的缓存，切换时保留以前的记录 缓存路由添加的条件为 !view.meta.noCache 

  3. moveToCurrentTag 为滚动到对应的路由标签

动态切换主题色

1.@/components/ThemePicker
  1. require('element-ui/package.json').version  获取到当前项目的 element-ui 的版本号
  2. 通过getCSSString获取到lib/theme-chalk/index.css
  3. 通过updateStyle来更新对应的颜色

如有错误见解，请指出

avatar
文章
阅读
粉丝