Vue Element前端应用开发之整合ABP框架的前端登录

概述

ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模式了。本篇随笔主要介绍Vue+Element+ABP的整合方式,先从登录开始介绍。

1、ABP开发框架的回顾

ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架。ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型。

启动Host的项目,我们可以看到Swagger的管理界面如下所示。

我们登录获得用户访问令牌token后,测试字典类型或者字典数据的接口,才能返回响应的数据。

我根据ABP后端项目之间的关系,整理了一个架构的图形。

应用服务层是整个ABP框架的灵魂所在,对内协同仓储对象实现数据的处理,对外配合Web.Core、Web.Host项目提供Web API的服务,而Web.Core、Web.Host项目几乎不需要进行修改,因此应用服务层就是一个非常关键的部分,需要考虑对用户登录的验证、接口权限的认证、以及对审计日志的记录处理,以及异常的跟踪和传递,基本上应用服务层就是一个大内总管的角色,重要性不言而喻。

对于通过Winform方式展示界面,以Web API方式和后端的ABP的Web API服务进行数据交互,是我们之前已经完成的项目,项目界面如下所示。

主体框架界面采用的是基于菜单的动态生成,以及多文档的界面布局,具有非常好的美观性和易用性。

左侧的功能树列表和顶部的菜单模块,可以根据角色拥有的权限进行动态构建,不同的角色具有不同的菜单功能点,如下是测试用户登录后具有的界面。

2、Vue+Element整合ABP框架的前端登录处理

之前我们开发完成的Vue+Element的前端项目,默认已经具有登录系统的功能,不过登录是采用mock方式进行验证并处理的,本篇随笔介绍是基于实际的ABP项目进行用户身份的登录处理,这个也是开发其他接口展示数据的开始步骤,必须通过真实的用户身份登录后台,获得对应的token令牌,才能进行下一步接口的开发工作。

例如对应登录界面上,界面效果如下所示。

在用户登录界面中,我们处理用户登录逻辑代码如下所示。

// 处理登录事件
    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 || '/' })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

这里主要就是调用Store模块里面的用户Action处理操作。

例如对于用户store模块里面的登录Action函数如下所示。

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { result } = response // 获取返回对象的 result
        var token = result.accessToken
        var userId = result.userId

        // 记录令牌和用户Id
        commit('SET_TOKEN', token)
        commit('SET_USERID', userId)

        // 存储cookie
        setToken(token)
        setUserId(userId)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

而其中login({ username: username.trim(), password: password }) 操作,是通过API封装处理的调用,使用前在Store模块中先引入API模块,如下所示。

import { login, logout, getInfo } from '@/api/user'

而其中 API模块代码如下所示。

export function login(data) {
  return request({
    url: '/abp/TokenAuth/Authenticate',
    method: 'post',
    data: {
      UsernameOrEmailAddress: data.username,
      password: data.password
    }
  })
}

这里我们用了一个/abp的前缀,用来给WebProxy的处理,实现地址的转义,从而可以实现跨站的处理,让前端调用外部地址就和调用本地地址一样,无缝对接。

我们来看看vue.config.js里面对于这个代理的转义操作代码。

而http://localhost:21021/api 地址指向的项目,是我们本地使用ABP开发的一个后端Web API项目,我们可以通过地址http://localhost:21021/swagger/index.html进行接口的查看。

我们打开获取授权令牌的Authenticate接口,查看它的接口定义内容

通过标注的1,2,我们可以看到这个接口的输入参数和输出JSON信息,从而为我们封装Web API的调用提供很好的参考。

ABP框架统一返回的结果是result,这个result里面才是返回对应的接口内容,如上面的输出JSON信息里面的定义。

所以在登陆返回结果后,我们要返回它的result对象,然后在进行数据的处理。

const { result } = response // 获取返回对象的 result

然后通过result来访问其他属性即可。

var token = result.accessToken // 用户令牌
var userId = result.userId // 用户id

用户登录成功后,并获取到对应的数据,我们就可以把必要的数据,如token和userid存储在State和Cookie里面了。

// 修改State对象,记录令牌和用户Id
commit('SET_TOKEN', token)
commit('SET_USERID', userId)

// 存储cookie
setToken(token)
setUserId(userId)

有了这些信息,我们就可以进一步获取用户的相关信息,如用户名称、介绍,包含角色列表和权限列表等内容了。

例如对应用户信息获取接口的ABP后端地址是 http://localhost:21021//api/services/app/User/Get

那么我们前端就需要在API模块里面构建它的访问地址(/abp/services/app/User/Get)和接口处理了。

export function getInfo(id) {
  return request({
    url: '/abp/services/app/User/Get',
    method: 'get',
    params: {
      id
    }
  })
}

如上所示,在Store模块里引入API模块,如下所示。

import { login, logout, getInfo } from '@/api/user'

然后在Store模块中封装一个Action用来处理用户信息的获取的。

// 获取用户信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.userid).then(response => {
        const { result } = response
        console.log(result) // 输出测试

        if (!result) {
          reject('Verification failed, please Login again.')
        }

        const { roles, roleNames, name, fullName } = result

        // 角色非空提醒处理
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', { roles, roleNames })
        commit('SET_NAME', name)
        // commit('SET_AVATAR', avatar) //可以动态设置头像
        commit('SET_INTRODUCTION', fullName)
        resolve(result)
      }).catch(error => {
        reject(error)
      })
    })
  },

Vue + Element前端项目的视图、Store模块、API模块、Web API之间关系如下所示。

登录后我们获取用户身份信息,在控制台中记录返回对象信息,可以供参考,如下所示

有了token信息,我们就可以继续其他接口的数据请求或者提交了,从而可以实现更多的管理功能了。

以上就是Vue Element前端应用开发之整合ABP框架的前端登录的详细内容,更多关于Vue Element的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue element和nuxt的使用技巧分享

    1.element的时间选择提交的格式转化 例如 Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间) 转化为 2020-01-11的格式 这记载datepicker中添加一句value-format="yyyy-MM-dd" <el-date-picker type="date" v-model="createdate" @change="formatTime" value-format

  • vue+elementui通用弹窗的实现(新增+编辑)

    本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑),分享给大家,具体如下: 组件模板 <el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="false"> <div class="ym-common-dialog" :class="customClass"> <d

  • vue+element table表格实现动态列筛选的示例代码

    需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen

  • Vue+abp微信扫码登录的实现代码示例

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册微信开放平台账号# 在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用.审核通过后获取到AppID和AppSecret以及登记的网站url.只有此url下的地址微信扫码后才能回调. 具体申请条件见官方文档. 生成登录二维码# 在vue登录页面嵌入登录二维码,根据官方文

  • vue element el-transfer增加拖拽功能

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能: 原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 sudo npm i sortablejs --save-dev html代码 <template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <

  • vue使用element-ui实现表单验证

    本文实例为大家分享了vue使用element-ui实现表单验证的具体代码,供大家参考,具体内容如下 一.简单逻辑验证(直接使用rules) 实现思路 html中给el-form增加:rules="rules" html中在el-form-item 中增加属性prop="名称" js中直接在data中定义rules:{} html部分 <el-form ref="form" :rules="rules" :model=&q

  • vue+element UI实现树形表格

    本文实例为大家分享了vue+element UI实现树形表格的具体代码,供大家参考,具体内容如下 一.在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ 'use strict' import Vue from 'vue' export default function treeToArray(data, expandA

  • 如何封装Vue Element的table表格组件

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • vue+elementUI动态增加表单项并添加验证的代码详解

    参考elementUI官网以及网上的其他一些资料.话不多说,直接贴代码. htmt部分: <div id="app" style="width: 500px;">         <el-form :model="environmentForm" ref="environmentForm">             <el-row :gutter="24" v-for=&quo

  • Vue Element前端应用开发之整合ABP框架的前端登录

    概述 ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模式了.本篇随笔主要介绍Vue+Element+ABP的整合方式,先从登录开始介绍. 1.ABP开发框架的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.AB

  • Vue Element前端应用开发之根据ABP后端接口实现前端展示

    概述 ABP(ASP.NET Boilerplate)框架主要是基于.net core 进行的后端Web API的开发,结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息,这样前端技术人员可以很容易整合前端的API应用.Vue + Element的前端应用,是目前较为流行的前端技术整合,Vue提供了前端框架很好的支持,Element提供了非常不错的界面组件封装和处理,通过ABP后端API接口和前端Vue+Element的整合,可以很好实现前后端的分离处理,同时又极大提高各自开

  • Vue+Element的后台管理框架的整合实践

    目录 Vue+ElementUI的后台管理框架 那什么是ElementUI? vue-element-admin 是一个后台前端解决方案 路由和配置左侧菜单 新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.可以参考官网:https://adminlte.io/ 效果图,如下: AdminLTE这个模板,还是很方便的.有兴趣的大家可以自行去琢磨.我只是把这个模板内嵌到新系统中去,也就没多去研究了. Adm

  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • vue+element 实现商城主题开发的示例代码

    本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab

  • vue+element实现批量删除功能的示例

    今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现 代码如下 html: <div class="row mt30 pl15"> <el-button type="warning

  • Vue Element前端应用开发之组织机构和角色管理

    1.组织机构管理模块界面 组织机构管理模块界面如下所示,包括组织机构的成员管理和角色管理,在ABP基础领域里面,组织机构可以包含0到多个成员,也可以包含0到多个角色,因此界面设计如下所示. 在对象UML的图例中,应该是如下所示的效果图,组织机构包含组织成员和角色的内容. 在界面上,组织成员还需要添加成员的功能,同理角色也需要添加角色的处理,如下UML图示. 由于添加成员也是一个界面功能,一般情况下,如果我们放在一个页面里面,可能会增加代码量,增加代码维护难度和降低可读性,因此我们可以考虑把这些添

  • Vue Element前端应用开发之菜单资源管理

    1.菜单资源及管理界面介绍 前面介绍过,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 加入菜单资源,以及整理它们之间的关系和表的信息,整理图示如下. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理模块的菜单列表如下所示. 菜单列表管理界面如下图所示,主要包括树状列表展示菜

  • Vue Element前端应用开发之开发环境的准备工作

    概述 之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式.采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两

  • Vue Element前端应用开发之前端API接口的封装

    1.ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型. 启动Host的项目,我们可以看到Swagger的管理界面如下所示. 上图就是ABP后端框架的API接口的查看页面,从上图可以看到,一般业务对象,都有Get.GetAll.Create.Update.Delete等常见接口,由于这些接口是给前端进行调用的. Vue + Elemen

随机推荐