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

发布时间:2022-07-29 发布网站:https://blog.csdn.net/weixin_44001965
前端之家收集整理的这篇文章主要介绍了vue-elementui-admin框架介绍- [作者: 阳哥]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一:框架介绍**

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

二:环境准备

需要在本地安装 nodegit。本项目技术栈基于 ES2015+vuevuexvue-routervue-cliaxioselement-ui,所有的请求数据都使用Mock.js进行模拟。不支持低版本浏览器(如 ie)

三:目录结构

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

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

补充:

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, 你看到下面的页面就代表操作成功了。

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

五:登录及权限

  • 登录逻辑:当用户填写完账号密码后向服务端验证是否正确,验证通过后,服务端会返回一个token,拿到token后(可将token存到cookie中,保证页面刷新后可以记住用户登录状态),前端会根据token拉取一个 user_info接口来获取用户详情信息(如用户权限,用户名等)。

  • 权限验证:通过token获取用户对应的 role,动态根据用户的 role 算出其对应有权限的路由,通过 router.addRoutes 动态挂载这些路由。

    首先看一下登录的具体流程:

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

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

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

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

5、权限控制

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

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

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

每一步都添加了注释

从代码上来看,主要分两种情况:有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

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

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

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

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

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

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

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

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

注意:

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

这个permission_routes其实就是路由的元信息,是一个数组

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

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

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

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

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

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

可以看出,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-elementui-admin框架介绍- [作者: 阳哥]全部内容,希望文章能够帮你解决vue-elementui-admin框架介绍- [作者: 阳哥]所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。