目錄概述1、ABP開發(fā)框架的回顧2、Vue+Element整合ABP框架的前端登錄處理概述

ABP框架作為后端，是一個(gè)非常不錯(cuò)的技術(shù)方向，但是前端再使用Asp.NET 進(jìn)行開發(fā)的話，雖然會(huì)快捷一點(diǎn)，不過可能顯得有點(diǎn)累贅了，因此BS的前端選項(xiàng)采用Vue+Element來做管理（后續(xù)可能會(huì)視情況加入Vue+AntDesign），CS前端我已經(jīng)完成了使用Winform+ABP的模式了。本篇隨筆主要介紹Vue+Element+ABP的整合方式，先從登錄開始介紹。

1、ABP開發(fā)框架的回顧

ABP是ASP.NET Boilerplate的簡稱，ABP是一個(gè)開源且文檔友好的應(yīng)用程序框架。ABP不僅僅是一個(gè)框架，它還提供了一個(gè)最?菏導(dǎo)?幕?諏煊蚯??杓?DDD)的體系結(jié)構(gòu)模型。

啟動(dòng)Host的項(xiàng)目，我們可以看到Swagger的管理界面如下所示。

我們登錄獲得用戶訪問令牌token后，測(cè)試字典類型或者字典數(shù)據(jù)的接口，才能返回響應(yīng)的數(shù)據(jù)。

我根據(jù)ABP后端項(xiàng)目之間的關(guān)系，整理了一個(gè)架構(gòu)的圖形。

應(yīng)用服務(wù)層是整個(gè)ABP框架的靈魂所在，對(duì)內(nèi)協(xié)同倉儲(chǔ)對(duì)象實(shí)現(xiàn)數(shù)據(jù)的處理，對(duì)外配合Web.Core、Web.Host項(xiàng)目提供Web API的服務(wù)，而Web.Core、Web.Host項(xiàng)目幾乎不需要進(jìn)行修改，因此應(yīng)用服務(wù)層就是一個(gè)非常關(guān)鍵的部分，需要考慮對(duì)用戶登錄的驗(yàn)證、接口權(quán)限的認(rèn)證、以及對(duì)審計(jì)日志的記錄處理，以及異常的跟蹤和傳遞，基本上應(yīng)用服務(wù)層就是一個(gè)大內(nèi)總管的角色，重要性不言而喻。

對(duì)于通過Winform方式展示界面，以Web API方式和后端的ABP的Web API服務(wù)進(jìn)行數(shù)據(jù)交互，是我們之前已經(jīng)完成的項(xiàng)目，項(xiàng)目界面如下所示。

主體框架界面采用的是基于菜單的動(dòng)態(tài)生成，以及多文檔的界面布局，具有非常好的美觀性和易用性。

左側(cè)的功能樹列表和頂部的菜單模塊，可以根據(jù)角色擁有的權(quán)限進(jìn)行動(dòng)態(tài)構(gòu)建，不同的角色具有不同的菜單功能點(diǎn)，如下是測(cè)試用戶登錄后具有的界面。

2、Vue+Element整合ABP框架的前端登錄處理

之前我們開發(fā)完成的Vue+Element的前端項(xiàng)目，默認(rèn)已經(jīng)具有登錄系統(tǒng)的功能，不過登錄是采用mock方式進(jìn)行驗(yàn)證并處理的，本篇隨筆介紹是基于實(shí)際的ABP項(xiàng)目進(jìn)行用戶身份的登錄處理，這個(gè)也是開發(fā)其他接口展示數(shù)據(jù)的開始步驟，必須通過真實(shí)的用戶身份登錄后臺(tái)，獲得對(duì)應(yīng)的token令牌，才能進(jìn)行下一步接口的開發(fā)工作。

例如對(duì)應(yīng)登錄界面上，界面效果如下所示。

在用戶登錄界面中，我們處理用戶登錄邏輯代碼如下所示。

// 處理登錄事件 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} }) }

這里主要就是調(diào)用Store模塊里面的用戶Action處理操作。

例如對(duì)于用戶store模塊里面的登錄Action函數(shù)如下所示。

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 // 獲取返回對(duì)象的 resultvar token = result.accessTokenvar userId = result.userId// 記錄令牌和用戶Idcommit(’SET_TOKEN’, token)commit(’SET_USERID’, userId)// 存儲(chǔ)cookiesetToken(token)setUserId(userId)resolve() }).catch(error => {reject(error) }) }) },

而其中l(wèi)ogin({ username: username.trim(), password: password }) 操作，是通過API封裝處理的調(diào)用，使用前在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 } })}

這里我們用了一個(gè)/abp的前綴，用來給WebProxy的處理，實(shí)現(xiàn)地址的轉(zhuǎn)義，從而可以實(shí)現(xiàn)跨站的處理，讓前端調(diào)用外部地址就和調(diào)用本地地址一樣，無縫對(duì)接。

我們來看看vue.config.js里面對(duì)于這個(gè)代理的轉(zhuǎn)義操作代碼。

而http://localhost:21021/api 地址指向的項(xiàng)目，是我們本地使用ABP開發(fā)的一個(gè)后端Web API項(xiàng)目，我們可以通過地址http://localhost:21021/swagger/index.html進(jìn)行接口的查看。

我們打開獲取授權(quán)令牌的Authenticate接口，查看它的接口定義內(nèi)容

通過標(biāo)注的1,2，我們可以看到這個(gè)接口的輸入?yún)?shù)和輸出JSON信息，從而為我們封裝Web API的調(diào)用提供很好的參考。

ABP框架統(tǒng)一返回的結(jié)果是result，這個(gè)result里面才是返回對(duì)應(yīng)的接口內(nèi)容，如上面的輸出JSON信息里面的定義。

所以在登陸返回結(jié)果后，我們要返回它的result對(duì)象，然后在進(jìn)行數(shù)據(jù)的處理。

const { result } = response // 獲取返回對(duì)象的 result

然后通過result來訪問其他屬性即可。

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

用戶登錄成功后，并獲取到對(duì)應(yīng)的數(shù)據(jù)，我們就可以把必要的數(shù)據(jù)，如token和userid存儲(chǔ)在State和Cookie里面了。

// 修改State對(duì)象，記錄令牌和用戶Idcommit(’SET_TOKEN’, token)commit(’SET_USERID’, userId)// 存儲(chǔ)cookiesetToken(token)setUserId(userId)

有了這些信息，我們就可以進(jìn)一步獲取用戶的相關(guān)信息，如用戶名稱、介紹，包含角色列表和權(quán)限列表等內(nèi)容了。

例如對(duì)應(yīng)用戶信息獲取接口的ABP后端地址是 http://localhost:21021//api/services/app/User/Get

那么我們前端就需要在API模塊里面構(gòu)建它的訪問地址（/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模塊中封裝一個(gè)Action用來處理用戶信息的獲取的。

// 獲取用戶信息 getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.userid).then(response => {const { result } = responseconsole.log(result) // 輸出測(cè)試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) //可以動(dòng)態(tài)設(shè)置頭像commit(’SET_INTRODUCTION’, fullName)resolve(result) }).catch(error => {reject(error) }) }) },

Vue + Element前端項(xiàng)目的視圖、Store模塊、API模塊、Web API之間關(guān)系如下所示。

登錄后我們獲取用戶身份信息，在控制臺(tái)中記錄返回對(duì)象信息，可以供參考，如下所示

有了token信息，我們就可以繼續(xù)其他接口的數(shù)據(jù)請(qǐng)求或者提交了，從而可以實(shí)現(xiàn)更多的管理功能了。

以上就是Vue Element前端應(yīng)用開發(fā)之整合ABP框架的前端登錄的詳細(xì)內(nèi)容，更多關(guān)于Vue Element的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！