vue-elementui-admin框架介绍- [作者: 阳哥]

痛定思痛。 2022-12-24 06:55 291阅读 0赞

一：框架介绍\*\*

[vue-element-admin][] 是一个后台前端解决方案，它基于 [vue][] 和 [element-ui][]实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。

*  集成方案: [vue-element-admin][vue-element-admin 1]
 *  基础模板: [vue-admin-template][]

**二：环境准备**

需要在本地安装 [node][] 和 [git][]。本项目技术栈基于 [ES2015+][ES2015]、[vue][vue 1]、[vuex][]、[vue-router][] 、[vue-cli][] 、[axios][] 和 [element-ui][]，所有的请求数据都使用[Mock.js][]进行模拟。**不支持低版本浏览器(如 ie)**

**三：目录结构**

下面是整个项目的目录结构。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存失败,源站可能有防盗链机制,建议将图片保存下来直接上传上传(imB6DSLC45aT-1606447242163)(vue-admin 框架介绍.assets/1605171830060.png)(vue-admin 框架介绍.assets/1605171830060.png)\]][imB6DSLC45aT-1606447242163_vue-admin _.assets_1605171830060.png_vue-admin _.assets_1605171830060.png]

补充：

1、public下index.html 时一个模板文件，作用是生成项目的入口文件，webpack打包的js，css也会注入到该页面中。浏览器访问项目的时候就会默认打开生成好的index.html

**四：安装**

# 克隆项目
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    
    # 进入项目目录
    cd vue-element-admin
    
    # 安装依赖
    npm install
    
    # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
    
    # 本地开发 启动项目
    npm run dev

启动完成后会自动打开浏览器访问 [http://localhost:9527][http_localhost_9527]， 你看到下面的页面就代表操作成功了。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opLVuhS8-1606447242167)(vue-admin 框架介绍.assets/1605172225984.png)\]][img-opLVuhS8-1606447242167_vue-admin _.assets_1605172225984.png]

五：登录及权限

*  登录逻辑：当用户填写完账号密码后向服务端验证是否正确，验证通过后，服务端会返回一个**token**，拿到token后（可将token存到cookie中，保证页面刷新后可以记住用户登录状态），前端会根据token拉取一个 **user\_info**接口来获取用户详情信息（如用户权限，用户名等）。
 *  权限验证：通过token获取用户对应的 **role**，动态根据用户的 role 算出其对应有权限的路由，通过 **router.addRoutes** 动态挂载这些路由。
    
    首先看一下登录的具体流程：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GkIrtJvh-1606447242169)(vue-admin 框架介绍.assets/1605175250744.png)\]][img-GkIrtJvh-1606447242169_vue-admin _.assets_1605175250744.png]

1、输入账号密码后，点击登录，触发click事件

//登录
        handleLogin() { 
          this.$refs.loginForm.validate(valid => { 
            if (valid) { 
              this.loading = true
              this.$store.dispatch('user/login', this.loginForm)
                .then(() => { 
                  this.$router.push({  path: this.redirect || '/', query: this.otherQuery })
                  this.loading = false
                })
                .catch(() => { 
                  this.loading = false
                })
            } else { 
              console.log('error submit!!')
              return false
            }
          })
        },

可以看出，点击过登录按钮后，调用了$store里的一个方法，名叫login

2、store里面的login方法

// user login
      login({ commit}, userInfo) { 
        const { username, password} = userInfo
        return new Promise((resolve, reject) => { 
          login({ loginName: username.trim(), passwd: password}).then(response => { 
            const data = response
            commit('SET_TOKEN', data)
            setToken(data)
            resolve()
          }).catch(error => { 
            reject(error)
          })
        })
      },

此处第一个login是$store中的方法，第二个login方法是，api里的login方法，用来调用接口的

3、api中的login方法

import request from '@/utils/request'
    
    export function login(data) {
      return request({
        url: uapPath + '/user/launcher',
        method: 'post',
        data
      })
    }

此处是api中的login方法，上面import引入了utils下的request，本质上是它调用了request.js，request.js是对axios进行了封装（统一请求拦截和响应拦截），用来请求后台接口的，如果这个接口请求成功，则回到login.vue页面中的.then()方法路由跳转到登录页。

4、request.js

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ms6Sqhfn-1606447242171)(vue-admin 框架介绍.assets/1606187946726.png)\]][img-ms6Sqhfn-1606447242171_vue-admin _.assets_1606187946726.png]

可以看到在这个请求中配置了baseURL，这个值是读取的项目根目录下的.env.development（开发环境）或者.evn.production(生产环境)文件中配置的VUE\_APP\_BASE\_API值。

5、权限控制

permission主要负责全局路由守卫和登录判断，可以理解为一个拦截器，下面来看一下具体的逻辑：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center 1]

每一步都添加了注释

从代码上来看，主要分两种情况：有token和无token

有token：再看看是不是去登录页的，登录页肯定不能拦截的，如果是登录页就直接放行。如果不是登录页，就要看看本地有没有用户信息，看看cookie中有没有用户信息（不一定是token，也可能是localstorage）。如果有用户信息，放行。如果没有用户信息，就调用接口去获取登录信息，router.addRoutes涉及到了动态添加路由。获取到用户信息后放行。如果在获取用户信息的过程中报错，则回到登录页。

无token：先看看用户要进入的页面是不是在白名单内，一般登录、注册、忘记密码都是在白名单内的，这些页面，在无token的情况下也是直接放行。如果不在白名单内，则回到登录页。

六、动态权限路由，显示侧边栏菜单

首先说一下element-admin这个框架实现方式：他是通过获取当前用户的权限去比对路由表，生成当前用户具的权限可访问的路由表，通过 `router.addRoutes` 动态挂载到 `router` 上。在前端控制权限。

但其实很多公司的业务逻辑可能不是这样的，举一个例子来说，很多公司的需求是每个页面的权限是动态配置的，不像本项目中是写死预设的。但其实原理是相同的。如：你可以在后台通过一个 tree 控件或者其它展现形式给每一个页面动态配置权限，之后将这份路由表存储到后端。当用户登录后得到 `roles`，前端根据`roles` 去向后端请求可访问的路由表，从而动态生成可访问页面，之后就是 router.addRoutes 动态挂载到 router 上，你会发现原来是相同的，万变不离其宗。

只是多了一步将后端返回路由表和本地的组件映射到一起。

const map={
     login:require('login/index').default // 同步的方式
     login:()=>import('login/index')      // 异步的方式
    }
    //你存在服务端的map类似于
    const serviceMap=[
     { path: '/login', component: 'login', hidden: true }
    ]
    //之后遍历这个map，动态生成asyncRoutes
    并将 component 替换为 map[component]

router/index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]

注意这个routes中分两块路由配置

一块是固定的，无权限的路由配置，第二块是，带权限的路由配置，根据用户权限来显示侧边栏。

上面的componentsMap其实就是一个动态需要根据权限加载的路由表。

首先要了解一下，侧边栏是如何渲染出来的，看看layout/components/slibar/index.vue有这样一段代码：

<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2QXi9Hl-1606447242175)(vue-admin 框架介绍.assets/1606208055358.png)\]][img-L2QXi9Hl-1606447242175_vue-admin _.assets_1606208055358.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OuJmBjA5-1606447242176)(vue-admin 框架介绍.assets/1606207458036.png)\]][img-OuJmBjA5-1606447242176_vue-admin _.assets_1606207458036.png]

注意：

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

这个permission\_routes其实就是路由的元信息，是一个数组

我们在获取用户信息的时候，会得到这个用户所拥有的角色，根据角色来筛选出符合的动态添加的路由，也就是上面permission.js中

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g17lvQoj-1606447242176)(vue-admin 框架介绍.assets/1606208853411.png)\]][img-g17lvQoj-1606447242176_vue-admin _.assets_1606208853411.png]

routes其实就是上面的两个权限组成的数组，然后传入了GenerateRoutes方法内，我们看下store/permission/generateRoutes中的代码：

首先从@/router/index引入了constantRoutes, componentsMap

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center 3]

可以看出，GenerateRoutes方法中，把从后台获取的菜单list转为tree的格式（其实这块可以在后台根据parentId递归查询即可），由于转为的tree为不可直接用的路由表，必须在把tree数据结构转换为可用的路由格式，存到vuex中。这里我是先给前台组件写在一个map里，key就是路由名称，遍历生成路由的时候，按key取出来组件,后台返回来路由名称后，去这个map里匹配，比如routeMap\[‘user’\]。

总结：这里就是把原有的获取路由组件逻辑改了一下下，从原来route/index改成异步从后台拿，从后台拿过来之后，在组合成组件。

然后调用了这两句

router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
                router.options.routes=store.getters.routers;

router.addRoutes（）方法是，动态添加路由配置，参数是符合路由配置的数组，然后将路由元信息，变成合并后的路由元信息，因为渲染侧边栏需要用到！

[vue-element-admin]: http://panjiachen.github.io/vue-element-admin
[vue]: https://github.com/vuejs/vue
[element-ui]: https://github.com/ElemeFE/element
[vue-element-admin 1]: https://github.com/PanJiaChen/vue-element-admin
[vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[node]: http://nodejs.org/
[git]: https://git-scm.com/
[ES2015]: http://es6.ruanyifeng.com/
[vue 1]: https://cn.vuejs.org/index.html
[vuex]: https://vuex.vuejs.org/zh-cn/
[vue-router]: https://router.vuejs.org/zh-cn/
[vue-cli]: https://github.com/vuejs/vue-cli
[axios]: https://github.com/axios/axios
[Mock.js]: https://github.com/nuysoft/Mock
[imB6DSLC45aT-1606447242163_vue-admin _.assets_1605171830060.png_vue-admin _.assets_1605171830060.png]: /images/20221120/8e7ea259f2f849b2ba80aad8b10fddf1.png
[http_localhost_9527]: http://localhost:9527/
[img-opLVuhS8-1606447242167_vue-admin _.assets_1605172225984.png]: /images/20221120/8679c2305b054cbd8a5c427b11430d3b.png
[img-GkIrtJvh-1606447242169_vue-admin _.assets_1605175250744.png]: /images/20221120/b43005b253a3422d815047caf3204ecf.png
[img-ms6Sqhfn-1606447242171_vue-admin _.assets_1606187946726.png]: /images/20221120/1c43774302da4caa8ee1bd4c69bf0c2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201127112308197.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201127112321652.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201127112500333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70
[img-L2QXi9Hl-1606447242175_vue-admin _.assets_1606208055358.png]: https://img-blog.csdnimg.cn/2020112711251953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70
[img-OuJmBjA5-1606447242176_vue-admin _.assets_1606207458036.png]: https://img-blog.csdnimg.cn/20201127112540666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70
[img-g17lvQoj-1606447242176_vue-admin _.assets_1606208853411.png]: https://img-blog.csdnimg.cn/20201127112556881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201127112630934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201127112658398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ==,size_16,color_FFFFFF,t_70#pic_center