按部就班VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登陆处理

VUE+Element 前端是一个纯粹的前端处理，前面介绍了不少都是Vue+Element开发的基础，从本章随笔开始，就须要进入深水区了，须要结合ABP框架使用（若是不知道，请自行补习一下个人随笔：ABP框架使用），ABP框架做为后端，是一个很是不错的技术方向，可是前端再使用Asp.NET 进行开发的话，虽然会快捷一点，不过可能显得有点累赘了，所以BS的前端选项采用Vue+Element来作管理（后续可能会视状况加入Vue+AntDesign），CS前端我已经完成了使用Winform+ABP的模式了。本篇随笔主要介绍Vue+Element+ABP的整合方式，先从登陆开始介绍。

 一、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服务进行数据交互，是咱们以前已经完成的项目，项目界面以下所示。

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

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

 

二、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信息，咱们就能够继续其余接口的数据请求或者提交了，从而能够实现更多的管理功能了。

后续随笔将基于ABP接口对接的基础上进行更多界面功能的开发和整合。 

 

列出一下前面几篇随笔的链接，供参考：

按部就班VUE+Element 前端应用开发(1）--- 开发环境的准备工做

按部就班VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

按部就班VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

按部就班VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

按部就班VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展现和字段转义处理

按部就班VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

按部就班VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数

按部就班VUE+Element 前端应用开发(8）--- 树列表组件的使用

按部就班VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

按部就班VUE+Element 前端应用开发(11）--- 图标的维护和使用